web前端开发

您现在的位置是:首页>

代码案例

纯CSS3动画打造一棵会跳舞的树

admin:杨小二时间:2019-10-19 13:47:250次
首先你需要相信的是,这个图片上的树,她是一颗会跳舞的树,是纯HTML5和CSS3实现的,没有用到任何的SVG、flash、JavaScript等技术,就是html和css。
相信这会让你觉得不可思议,是的,难以相信。首先这棵树明显是个递归结构,需要用的数学上的算法,然后这棵树在跳舞时(摆动),树枝上下摆动和左右摇晃的节奏并不同步,带有一种自然的随意和协调性。看起来很美。
CSS3动画是现代浏览器给Web程序员带来的一种福利。程序员可以利用这些新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 

平面设计