<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>css3 圣诞红包雨效果</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

         ul{

             list-style: none;

         }

         .cc{

             width: 100%;

             height: 500px;

            overflow: hidden;

         }

         .outer{

             position: relative;

             width: 200px;

            height: 600px;

            animation:move 6s forwards;

            /* transition:all .2s;*/

         }

         @keyframes move{

             0%{

                 transform: translateX(0);

             }

             50%{

                 transform: translateX(600px);

             }

             100%{

                 transform: translateX(1200px);

             }

         }

        .festival_fly {

            visibility: hidden;

            position: absolute;

            left:0;

            top:0;

            z-index: 400;

            width: 200px;

            height: 48px;

            background: url(images/sd01.png) no-repeat left top;

            animation: flyMove 1s steps(9) infinite;

        }

        .festival_fly .link {

            display: block;

            height: 100%;

            width: 100%;

        }

        .festival_fly .close {

            position: absolute;

            top: -5px;

            right: -5px;

        }

        .couten {

            position: absolute;

            top: 0;

            left:0;

            z-index: 20;

        }

        .couten li {

            position: absolute;

            width: 67px;

            height: 100px;

            background: url(images/sd02.png);

            opacity: 0;

            transform: scale(0.3);

            animation-duration: 6s;

            animation-iteration-count: 1;

            cursor: pointer;

        }

        .couten li.rain.stop {

            animation-iteration-count: 0;

        }

        .couten li.rain {

            animation-name: falling;

        }

        @keyframes flyMove{

            0% {

                background-position: 0 0;

            }

            100% {

                background-position: 0 -432px;

            }

        }

        @keyframes falling {

            0% {

                transform: translate3d(0, 0, 0) rotate(0deg) scale(0.3);

                opacity: 1;

            }

            70% {

                opacity: 1;

            }

            100% {

                transform: translate3d(-100px, 935px, 0) rotate(50deg) scale(1);

                opacity: 0;

            }

        }

    </style>

</head>

<body>

<div class="cc">

    <div class="outer">

        <div class="festival_fly flyIn flySide" id="festival_fly" style="visibility: visible;">

            <a class="link" class="close">

                <img src="https://p.ssl.qhimg.com/d/inn/89e080e6/close.png">

            </a>

        </div>

        <ul class="couten">

            <li class="li rain stop" style="animation-delay: 0s; animation-play-state: paused;"></li>

            <li class="li rain stop" style="animation-delay: 0.3s; animation-play-state: paused;"></li>

            <li class="li rain" style="animation-delay: 0.6s;"></li>

            <li class="li rain" style="animation-delay: 0.9s;"></li>

            <li class="li rain" style="animation-delay: 1.2s;"></li>

            <li class="li rain" style="animation-delay: 1.5s;"></li>

            <li class="li rain" style="animation-delay: 1.8s;"></li>

            <li class="li rain" style="animation-delay: 2.1s;"></li>

            <li class="li rain" style="animation-delay: 2.4s;"></li>

            <li class="li rain" style="animation-delay: 2.7s;"></li>

            <li class="li rain" style="animation-delay: 3s;"></li>

            <li class="li rain" style="animation-delay: 3.3s;"></li>

            <li class="li rain" style="animation-delay: 3.6s;"></li>

            <li class="li rain" style="animation-delay: 3.9s;"></li>

            <li class="li rain" style="animation-delay: 4.2s;"></li>

            <li class="li rain" style="animation-delay: 4.5s;"></li>

            <li class="li rain" style="animation-delay: 4.8s;"></li>

            <li class="li rain" style="animation-delay: 5.1s;"></li>

            <li class="li rain" style="animation-delay: 5.4s;"></li>

            <li class="li rain" style="animation-delay: 5.7s;"></li>

        </ul>

    </div>

</div>

</body>

</html>

css3 圣诞红包雨效果的更多相关文章

  1. 用css动画写一个下红包雨的效果

    红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...

  2. 2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View

    (本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...

  3. 仿淘宝,京东红包雨(基于Phaser框架)

    本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://g ...

  4. 红包雨中：Redis 和 Lua 的邂逅

    2018年,王思聪的冲顶大会,西瓜视频的百万英雄,再到映客的芝士超人,直播答题火爆全网. 我服务的一家电商公司也加入了这次热潮,技术团队研发了直播答题功能.答题结束之后,红包会以红包雨的形式落下,用户 ...

  5. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  6. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

随机推荐

  1. 如何花二十分钟使用Hexo搭建个人博客

    前提条件: 你必须得有一个github账户 你的电脑上要安装了git和nodejs 你也可以达到这样的效果:https://liubinpy.github.io/ 第一步 进入一个你觉得比较安全的目录 ...

  2. CADisplayLink+弹簧动画实现果冻效果

    项目中在Tabbar中间的按钮要从底部弹出视图并有果冻效果,在CocoaChina中找了一篇博客用 UIBezierPath 实现果冻效果,github,自己就按着上面的demo修改了一下( 之前也是 ...

  3. 使用 Angular 和 RxJS 实现的无限滚动加载

    无限滚动加载应该是怎样的? 无限滚动加载列表在用户将页面滚动到指定位置后会异步加载数据.这是避免寻主动加载(每次都需要用户去点击)的好方法,而且它能真正保持应用的性能.同时它还是降低带宽和增强用户体验 ...

  4. iOS开源项目周报0316

    由OpenDigg 出品的iOS开源项目周报第十二期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.GodEye  ...

  5. LINQ的查询标准操作汇总

    记录LINQ的查询标准操作

  6. flash builder注释字体看不清

    window-preferences-flex-editiors-syntex coloring-ActionScript-Comment (窗口-首选项-flashbuilder-编辑器-语法着色- ...

  7. Knockout.js Style绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. mysql 登录报错：ERROR 1045 (28000)

    公司linux系统的mysql数据库root用户设置过密码,但常常用命令'mysql -u root -p'登录报错,有时又能登录.登录报错信息为: [root@localhost ~]# mysql ...

  9. C#Json数据类型

    引用所对应框架的类库文件,下载地址:http://json.codeplex.com/ 在一般处理程序axhx中: 引用的命名空间: using System.IO;using Newtonsoft. ...

  10. JMM和底层实现原理