纯CSS3动画:一棵跳舞的树
<!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动画:一棵跳舞的树的更多相关文章
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...
- 纯CSS3动画按钮效果
在线演示 本地下载
- 超酷!纯CSS3烧烤动画实现教程
今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
随机推荐
- css3常用样式集锦
控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...
- ubuntu升级php版本
如果安装的 PHP 版本过低的话,可以通过下面的指令来升级: sudo add-apt-repository ppa:ondrej/php5 sudo apt-get update sudo ...
- HUST 1600 Lucky Numbers
暴力打表. #include<cstdio> #include<cstring> #include<cmath> #include<string> #i ...
- Java层与Jni层的数组传递(转)
源:Java层与Jni层的数组传递 Android开发中,经常会在Java代码与Jni层之间传递数组(byte[]),一个典型的应用是Java层把需要发送给客户端的数据流传递到Jni层,由Jni层的S ...
- spring DateUtils
/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...
- kvm 动态挂载硬盘
根据最新需求需要动态的给kvm下的windows虚拟机挂载硬盘,网上查看了很多资料终于试通了,在这里记录下方便自己回忆,同事可以给大家做做参考,如果有问题欢迎吐槽 环境:先说说我使用的环境,环境是使用 ...
- WCF应用场景
WCF全称Windows Communication Foundation,是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NET Framework 3.5的重要组成部分.使用 ...
- Java链表的一些操作:
[还有一些其他的算法提]http://blog.csdn.net/WalkingInTheWind/article/category/906980 [转]http://blog.csdn.net/lu ...
- 动态创建Fastreport(delphi)
动态创建Fastreport分以下几个步骤: 1.首先清空Fastreport,定义全局变量,并加载数据集 frReport.Clear; frReport.DataSets.Add(fr ...
- 【T】并行调度
/** * 并行调度相关处理 * * 按卫星*日期 ,将待处理的任务分解为 卫星+日期 粒度的子任务 添加到paramMapList列表中 */ List<Map<String, Obje ...