<!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. Android组件--意图（Intent）

    1. 隐示调用和显示调用 参考资料:http://blog.csdn.net/harvic880925/article/details/38399723 1.概念 1). 显式意图: 能从intent ...

  2. Git——新手入门与上传项目到远程仓库GitHub

    Git:先进的分布式版本控制系统,一个开源式的分布式版本控制工具. Git安装 在Windows操作系统下,访问Git下载地址https://git-for-windows.github.io/ 注册 ...

  3. Label控件

    文本控件包含标签控件(label).按钮控件(button).文本框控件(textBox)和有格式文本控件(richtextBox)   Label控件可以说是最简单的控件,是System.windo ...

  4. flask笔记三：flask-login插件的使用

    flask-login插件的使用 安装: pip install flask-login 初始化LoginManager ##############LoginManager设置########### ...

  5. 十四、curator recipes之DistributedAtomicLong

    简介 和Java的AtomicLong没有太大的不同DistributedAtomicLong旨在分布式场景中维护一个Long类型的数据,你可以像普通单机环境一样来使用它. 官方文档:http://c ...

  6. 九、双端队列LinkedBlockDeque

    一.简介 JDK通过BlockQueue阻塞队列实现了生产者-消费者模式,生产者向队列添加数据,消费者从队列里面消费数据. 但是在有些场景里面,我们是无法区分生产者消费者的,或者说既是生产者,也是消费 ...

  7. spring 事务管理机制

    1. spring 事务管理抽象 spring 的事务策略机制的核心就是 org.springframework.transaction.PlatformTransactionManager 接口. ...

  8. golang 的md5加密

    先看实现代码: package main import (     "crypto/md5"     "encoding/hex"     "fmt& ...

  9. Centos的一个find命令配合rm删除某天前的文件

    语句写法:find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例1: 将/usr/local/backups目录下所有10天前带 ...

  10. 洛谷 P3391 文艺平衡树

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