<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3动画：一棵跳舞的树</title>
<style>
.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动画：一棵跳舞的树的更多相关文章

  1. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  2. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  3. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  4. 5种漂亮的纯CSS3动画按钮特效

    这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...

  5. 纯CSS3动画按钮效果

    在线演示 本地下载

  6. 超酷！纯CSS3烧烤动画实现教程

    今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...

  7. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  8. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  9. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

随机推荐

  1. DNS相关配置文件

    我们晓得主机名对应到 IP 有两种方法,早期的方法是直接写在档案里面来对应, 后来比较新的方法则是透过 DNS 架构!那么这两种方法分别使用什么配置文件?可不可以同时存在? 若同时存在时,那个方法优先 ...

  2. 仿复制粘贴功能，长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  3. Java层与Jni层的数组传递（转）

    源:Java层与Jni层的数组传递 Android开发中,经常会在Java代码与Jni层之间传递数组(byte[]),一个典型的应用是Java层把需要发送给客户端的数据流传递到Jni层,由Jni层的S ...

  4. 使用Emacs中的org-mode写cnblogs之图片插入

    .title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...

  5. 【转】进程间通信方式总结（windows 和linux）

    平时看的书很多,了解的也很多,但不喜欢总结,这不昨天面试的时候被问到了进程间通信的方式,因为没有认真总结过,所以昨天答得不是特别好.现在将linux和windows的进程间通信方式好好总结一下.    ...

  6. cocos2d中box2d讲解一

    在游戏中我们经常要加入物理碰撞等和物理有关的内容,在游戏中加入物理引擎可以使我们的游戏更加真实,为玩家展示一个更真实的世界,cocos2d-x支持两个物理引擎Box2d和Chipmunk,本文介绍bo ...

  7. js-权威指南学习笔记8

    第8章 函数 1.参数有形参和实参的区别,形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数. 2.函数表达式可以包含名称,这在递归时很有用. 3.函数定义表达式特别适合用来定义那些只会 ...

  8. C# Expression表达式笔记

    整理了一下表达式树的一些东西,入门足够了 先从ConstantExpression 开始一步一步的来吧  它表示具有常量值的表达式 我们选建一个控制台应用程序 ConstantExpression _ ...

  9. Linux_System11

    1.查看/var目录的大小:1)ll -hd /var 查看目录的实际大小2)du -sh /var 查看目录所占磁盘空间大小修改权限:chmod 750 hunan修改属主和属组:groupadd ...

  10. Struts2接受参数的几种类型和接受复杂类型参数（list<String>和list<Object>）

    Struts2接受参数的几种类型 大概有这几种类型: 1.使用Action的属性接受参数 在Action中加入成员变量,配置Getter和Setter方法,Getter而和Setter方法的名字和表单 ...