<!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. JVM垃圾回收机制总结

    对于垃圾回收机制我先抛出三个问题: ①哪些内存需要回收? ②什么时候回收? ③如何回收? 下面我们主要针对这三个问题来研究JVM GC 一.哪些内存需要回收? 1.JAVA使用可达性分析法来判断对象是 ...

  2. [转]Web Api系列教程第2季（OData篇）（二）——使用Web Api创建只读的OData服务

    本文转自:http://www.cnblogs.com/fzrain/p/3923727.html 前言 很久没更新了,之前有很多事情,所以拖了很久,非常抱歉.好了,废话不多说,下面开始正题.本篇仍然 ...

  3. table 中的tr 行点击 变换颜色背景

    <style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...

  4. 【转】IIS网站浏览时提示需要用户名密码登录-解决方法

    打开iis,站点右键----属性----目录安全性----编辑----允许匿名访问钩选 IIS连接127.0.0.1要输入用户名密码的解决办法原因很多,请尝试以下操作: 1.查看网站属性——文档看看启 ...

  5. javascript window.opener的用法分析

    window.opener 返回的是创建当前窗口的那个窗口的引用 window.opener 的用法 window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接 ...

  6. 微信小程序（一）--简单的介绍

    转自:https://developers.weixin.qq.com/miniprogram/dev/index.html 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个小程序框架系统分 ...

  7. C#制作手机网站

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //在 ...

  8. 一、hbase单机安装

    下文将快速构建并启动单节点hbase,不使用hdfs作为存储,不使用独立的zookeeper hbase官网:http://hbase.apache.org/ 一.JDK环境 hbase需要JDK环境 ...

  9. grunt-contrib-watch 监控 JS 文件改变来运行预定义的Tasks

    依赖于 GruntJs ~0.4.0 监控 JS 文件改变来运行预定义的Tasks Demo: watch: { scripts: { files: ['src/**/*.js'], tasks: [ ...

  10. 洛谷 P3391 文艺平衡树

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 --b ...