树叶飘落

html

    <!-- 树叶飘落动画效果 -->
            <div class="leafbox">
                <div class="leafimg1">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf1.png">
                </div>
                <div class="leafimg2">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf2.png">
                </div>
                <div class="leafimg3">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf3.png">
                </div>
                <div class="leafimg4">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf4.png">
                </div>
                <div class="leafimg5">
                    <img src="http://ossweb-img.qq.com/images/chanpin/daoju/public/a20160420lol/leaf5.png">
                </div>
            </div>
        </div>
    </div>

css

.leafbox{position:absolute;top:0;left:-460px;width:1920px;z-index:1;height:890px;}
.leafbox > div{position:absolute;opacity:0;filter:alpha(opacity=0);-webkit-animation-iteration-count: infinite, infinite;-webkit-animation-direction: normal, normal;-webkit-animation-timing-function: linear, ease-in;-moz-animation-iteration-count: infinite, infinite;-moz-animation-direction: normal, normal;-moz-animation-timing-function: linear, ease-in;}
.leafbox > div > img {position: absolute;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-timing-function: ease-in-out;-moz-transform-origin: 50% -100%;}
.show .leafimg1{top: -140px;left: 428px;-webkit-animation-name: dropAnim ;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.5s;animation-duration: 5.5s;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.show .leafimg1 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.3s;animation-duration: 6.3s;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.show .leafimg2{top: -140px;left: 288px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.8s;animation-duration: 5.8s;-webkit-animation-delay: 8s;animation-delay: 8s;}
.show .leafimg2 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.5s;animation-duration: 6.5s;-webkit-animation-delay: 8s;animation-delay: 8s;}
.show .leafimg3{top: -140px;left: 1328px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.7s;animation-duration: 5.7s;-webkit-animation-delay: 4s;animation-delay: 4s;}
.show .leafimg3 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6s;animation-duration: 6s;-webkit-animation-delay: 4s;animation-delay: 4s;}
.show .leafimg4{top: -140px;left: 1730px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.2s;animation-duration: 5.2s;-webkit-animation-delay: 10s;animation-delay: 10s;}
.show .leafimg4 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 5.8s;animation-duration: 5.8s;-webkit-animation-delay: 10s;animation-delay: 10s;}
.show .leafimg5{top: -140px;left: 1150px;-webkit-animation-name: dropAnim;-moz-animation-name: dropAnim ;animation-name: dropAnim;-webkit-animation-duration: 5.3s;animation-duration: 5.3s;-webkit-animation-delay: 14s;animation-delay: 14s;}
.show .leafimg5 img{-webkit-animation-name: flipAnim;-webkit-moz-name: flipAnim;animation-name: flipAnim;-webkit-animation-duration: 6.6s;animation-duration: 6.6s;-webkit-animation-delay: 14s;animation-delay: 14s;}
@-webkit-keyframes dropAnim
{
    0%   {-webkit-transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {-webkit-transform: translate(0px, 690px);opacity: 0;}
}
@-webkit-keyframes flipAnim
{
    0%   { -webkit-transform: scale(-1, 1) rotate(65deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-65deg); }
}
@-moz-keyframes dropAnim
{
    0%   {-moz-transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {-moz-transform: translate(0px, 690px);opacity: 0;}
}
@-moz-keyframes flipAnim
{
    0%   { -moz-transform: scale(-1, 1) rotate(65deg); }
    100% { -moz-transform: scale(-1, 1) rotate(-65deg); }
}
@keyframes dropAnim
{
    0%   {transform: translate(0px, -50px);opacity: 0;}
    5%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {transform: translate(0px, 690px);opacity: 0;}
}
@keyframes flipAnim
{
    0%   { transform: scale(-1, 1) rotate(65deg); }
    100% { transform: scale(-1, 1) rotate(-65deg); }
}

js

     //树叶动画效果
        $(".leafbox").addClass("show");

        if ($(window).scrollTop() >= 600) {
            if (!$(‘#cnblogs‘).html()) {
                $(‘.sidebar‘).show();
            }else{
                $(‘.sidebar‘).hide();
            }
        } else {
            $(‘.sidebar‘).hide();
        }
时间: 2024-10-28 06:51:58

树叶飘落的相关文章

HTML5动画(一):实现树叶飘落

实现如图所示的东西效果(落叶下落): html代码: <!DOCTYPE html> <html> <head> <title>HTML5树叶飘落动画</title> <meta charset="utf-8"> <meta name="viewport" content="width=500px, initial-scale=0.64"> <link re

HTML5树叶飘落动画

查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> <html> <head> <title>HTML5树叶飘落动画-柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/"

PPT动画制作飘落的树叶免费ppt模板

第一步,插[url=http://www.2ppt.cn]金色的脚印课件[/url]入一张树叶图片将其放置于画布外,选中树叶,为其添加"陀螺旋"(此动画在"强调"组中).双击动画窗格中的"陀螺旋",为其设置参数,如下图所示. 第二步,选中树叶,单击工具栏的"添加动画",为其添加"基本旋转"(此动画在"进入-华丽"组中).双击动画窗格中的"基本旋转",为其设置参数,效果

很多人,被这句话害了一辈子

点击上方蓝字关注我们,夜读与你一起砥砺前行! 21君:小时候,你可听过“这孩子特聪明,就是学习不用心,他要是认真起来,学习成绩肯定好.”这句话么?是对你说的,还是对你身边的人说的?很多人都觉得这是一个夸奖,但其实给孩子这样的一个想法,其实是害了孩子.自作聪明的人,往往还没有学会正视自己与他人的努力和付出,就已经喜欢了那种轻盈获胜的姿态.为了姿态好看,他们宁可输,也不想通过努力制胜.来源:衷曲无闻(zhongquwuwen) 8:48 很多人,被这句话害了一辈子 来自21世纪经济报道   特别鸣谢

打字文章

我与父亲不相见已二年余了,我最不能忘记的是他的背影. 那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子.我从北京到徐州打算跟着父亲奔丧回家.到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪.父亲说: “事已如此,不必难过,好在天无绝人之路!” 回家变卖典质,父亲还了亏空:又借钱办了丧事.这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲.丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行. 到南京时,有朋友约去游逛,勾留了一日:第二日上午便须渡江到浦口,

分享10款功能强大的HTML5/CSS3应用插件

1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS3美化Checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox,外观很时尚. 在线

jQuery效果—雪花飘落

实现思路 1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落: 2.在指定的时间内飘落后移除页面: 3.可设置雪花的大小,在一定范围内随机雪花大小: 4.什么时间后清除生成雪花,停止函数. js代码 (function($){ $.fn.snow = function(options){ var $flake = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}), docu

【OpenGL】Shader实例分析(七)- 雪花飘落效果

转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChan

原生js实现雪花飘落效果

雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;margin: 0;} body{ background:#000; width: 100%; height: 100%; overflow:hidden; } </style> <div id="flame"></div> js实现代码: <script