源码案例纯CSS3动画打造一棵会跳舞的树

Posted 2021-04-09 web前端开发

首先你需要相信的是，这个图片上的树，她是一颗会跳舞的树，是纯html5和CSS3实现的，没有用到任何的SVG、flash、javascript等技术，就是html和css。

相信这会让你觉得不可思议，是的，难以相信。首先这棵树明显是个递归结构，需要用的数学上的算法，然后这棵树在跳舞时(摆动)，树枝上下摆动和左右摇晃的节奏并不同步，带有一种自然的随意和协调性。看起来很美。

CSS3动画是现代浏览器给Web程序员带来的一种福利。程序员可以利用这些新web技术轻松的实现各种前人想不到效果。

在老式浏览器(IE6/7/8)里，这种效果只能用第三方插件实现(falsh，或用复杂的js)。技术的进步给程序员减轻了压力，扩展了空间。

CSS代码如下：

.trunk, .trunk div {
  background: #136086;
  /*border-radius:$w;*/
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  -webkit-animation-name: rot;
          animation-name: rot;
  -webkit-animation-duration: 2.02s;
          animation-duration: 2.02s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: 5px 5px;
      -ms-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;}.trunk.trunk, .trunk div.trunk {
  bottom: 0;
  left: 50%;
  -webkit-animation-name: rot-root;
          animation-name: rot-root;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;}.trunk > div, .trunk div > div {
  /*opacity:0.9;*/
  top: 0;
  left: 100px;
  -webkit-animation-duration: calc(inherit / 2);
          animation-duration: calc(inherit / 2);
  /* don't works 
以上是关于源码案例纯CSS3动画打造一棵会跳舞的树的主要内容，如果未能解决你的问题，请参考以下文章
 
 Web前沿技术纯 CSS3 打造的10个精美加载进度条动画
 纯css3动画原理做图片翻转效果
 精致动画特效及源代码
 纯CSS3做炫酷环形星星发光动画，在简单没思路你也做不出来
 18个强大的纯CSS3动画案例分享
 纯css3做动态波纹效果, 类似翻转的海浪一样