<!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. matlab中gatbx工具箱的添加

    1. 从http://crystalgate.shef.ac.uk/code/下载工具箱压缩包gatbx.zip 2. 解压gatbx.zip,将其子文件夹genetic放在matlab安装目录too ...

  2. [iOS Animation]-CALayer 性能优化

    性能优化 代码应该运行的尽量快,而不是更快 - 理查德 在第一和第二部分,我们了解了Core Animation提供的关于绘制和动画的一些特性.Core Animation功能和性能都非常强大,但如果 ...

  3. android Makefile把jar包打到apk里

    这个是经常的需求,我就是经常忘,关键不理解啊. 反反复复的也看看了android makefile. 太复杂了. 慢慢来吧.哎.工作十年.啥也不会.咋整? ## Copyright (C) 2008 ...

  4. Mac快速查看某条命令的版本和存放的位置（ls -l `which mvn`）

    输入: ls -l `which mvn` 如图:

  5. PHP内核变量存储

    PHP作为一门弱类型语言,其变量类型可任意改变.而C作为PHP的底层实现,是通过结构及联合来实现PHP变量的弱类型特性的.在PHP源码中,Zend/zend.h文件有关于PHP变量的结构定义. 01 ...

  6. ajax 基础2

    连接数据库实现分页功能 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

  7. 每个Javascript开发者都应当知道的那些事

    每个Javascript开发者都应当知道的那些事 2015-06-07 前端大全 (点击上方蓝字,可快速关注我们) Javascript是一种日益增长的语言,特别是现在ECMAScript规范按照每年 ...

  8. 使用React Native来撰写跨平台的App

    React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...

  9. 360路由器+花生壳实现外网访问SVN服务器

    注册花生壳账号 花生壳注册地址:https://console.oray.com/passport/register.html?fromurl=http%3A%2F%2Fhsk.oray.com%2F ...

  10. iOS 错误 之 Potential leak of an object stored into 'cs'

    存储到 “cs”的对象存在潜在的泄露