动画舞蹈html5,纯CSS3动画：一棵跳舞的树

首先你需要相信的是，下面的这个会跳舞的树是用纯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

动画舞蹈html5,纯CSS3动画：一棵跳舞的树相关推荐

8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
纯html css动画效果,8个超震撼的HTML5和纯CSS3动画源码
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比 ...
18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
目录 transform-style: preserve-3d perspective perspective-origin rotate translate 纯CSS3动画正方体贴图小项目链接和GI ...
纯CSS3动画实现小球绕轨道旋转效果
效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...

动画舞蹈html5,纯CSS3动画：一棵跳舞的树

动画舞蹈html5,纯CSS3动画：一棵跳舞的树相关推荐

最新文章

热门文章