css3很美的蟠桃动画

查看效果:
http://hovertree.com/texiao/css3/26/

源码下载:
http://hovertree.com/h/bjaf/ndhxgfkn.htm

效果图如下:

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="Copyright" content="Tencent" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3很美的蟠桃动画- 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" media="screen" href="http://hovertree.com/texiao/css3/26/css/style.css">
</head>
<body>

<div class="act_wrapper">
<div class="act_content">
<div class="mod_style_3">
<span class="peach peach1 shake-leftright1" data-value="1"></span>
<span class="peach peach2 shake-leftright2" data-value="2"></span>
<span class="peach peach3 shake-leftright3" data-value="3"></span>
<span class="peach peach4 shake-leftright4" data-value="4"></span>
<span class="peach peach5 shake-leftright5" data-value="5"></span>
<span class="peach peach6 shake-leftright6" data-value="6"></span>
</div>

</div>
<div class="act_bg">
<div class="bg_act_6"></div>
<div class="bg_act_7"></div>
<div class="bg_act_8"></div>
</div>
</div>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/taoshu.htm">原文</a> <a href="http://hovertree.com/h/bjaf/e1r8s4va.htm">齐天大圣</a></p>
</div>
</body>
</html>

转自:http://hovertree.com/h/bjaf/taoshu.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

时间: 2024-10-11 22:42:14

css3很美的蟠桃动画的相关文章

CSS3很强大

[代码] 个人感觉很强大的CSS3特效旋转效果 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>transform-style的3D效果测试</title><style>*{font-size: 14px;color: #fff; padding:0; margin:0;}#container { position: relative;

css3 transition属性实现3d动画效果

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示 源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格 今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示 源码下载 3.纯CSS3实现云雾缭绕动

分享9款用HTML5/CSS3制作的动物人物动画

1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效.今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意. 在线演示 源码下载 3.HTML5/SVG实现随风摇摆的动画

我的心底装着宽恕和包容世界很美

朋友林夏闹着辞职要走,还是三年前的事. 那一天,同事们凑份子,为他送行.平常,公司里,大家都忙得焦头乱额的,彼此间并没有太深的交往,没想到,饭店里还是哗啦啦去了好几桌人.尽管嘴上不说,大家都觉得,林夏是个不错的人. 酒还没喝到三杯,李大嘴憋不住,问林夏要到哪里高就.林夏怏怏地说,暂时还没有去处.李大嘴急了,说,林夏,你一定是疯了,这里有一份不错的薪水,还有一帮好哥们儿,你不好好在这儿待着,发哪门子神经呢? 李大嘴是公司里林夏最铁的哥们儿.林夏要走,他第一个想不通.李大嘴指着几大桌人说,林夏,你看

思念很痛很苦也很美

思念很痛很苦,但也很美. 随着年龄的增长,社会压力的增大,我慢慢的发现要再像年轻时那样勇敢的去爱一个人,去思念一个人已经变得非常困难了.这难道就是大家常开玩笑的"累觉不爱"吗?我们在感情上变得更加理性,这有好处,但另一方面其实我们慢慢的在变得更加麻木,我们很多时候会用理性去控制感性.我能很清晰的感受到,我已经很难像年轻时那样单纯的去思念一个人了,也许有人说这是成熟,但我觉得为了成熟我付出的代价太大了,我已经慢慢的失去了爱的能力,失去了思念的能力.所以,对于我来说,思念是如此珍贵,思念是

CSS3中的变形与动画【转】

最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用 那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran

微信连WiFi 看上去很美的蛋糕

如果说现在还有能跺一跺脚,国内互联网行业就颤三颤的企业的话,那绝对非BAT莫属.BAT凭借在各自领域独树一帜的垄断能力,将互联网行业中份量最重的搜索.网购.社交一网打尽.可以说,BAT的一个小动作都能牵一发而动国内互联网行业的全身.近日,微信连WiFi功能的发布,就引起一阵"骚乱". 所有商用WiFi的从业者都在惊呼狼来了,怕微信抢了自己的生意.也有的企业持欢迎态度,毕竟只有巨头进入,才能盘活这个商用WiFi市场,让用户提前感受其魅力.虽然最终可能微信吃肉,其他企业喝汤,也总好过当下半

利用CSS3 中steps()制用动画

.monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; animation: play .8s steps(10) infinite; } @keyframes play { 100% { background-posi