<!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. Logback学习笔记

    Logback介绍 Logback 分为三个模块:Core.Classic 和 Access.Core模块是其他两个模块的基础. Classic模块扩展了core模块. Classic模块相当于log ...

  2. 理解Flexbox：你需要知道的一切

    这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备. 学习Flexbox的曲线 @Philip Roberts在Twitte ...

  3. WebUtility(提供在处理 Web 请求时用于编码和解码 URL 的方法。)

    public static string UrlEncode( string str ) UrlEncode(String) 方法可用来编码整个 URL,包括查询字符串值. 如果没有编码情况下,如空格 ...

  4. 十五、curator recipes之DistributedQueue

    简介 curator实现了先入先出的分布式消息队列,它采用的是zookeeper的持久化有序节点. 官方文档:http://curator.apache.org/curator-recipes/dis ...

  5. CODEFORCES 429B 动态规划

    http://codeforces.com/problemset/problem/429/B 可以参考这篇文章: http://blog.csdn.net/pure_lady/article/deta ...

  6. 基于注解的简单SSH保存用户小案例

    需求:搭建SSH框架环境,使用注解进行相关的注入(实体类的注解,AOP注解.DI注入),保存用户信息 效果: 一.导依赖包 二.项目的目录结构 三.web.xml配置 <?xml version ...

  7. 线程与全局解释器锁（GIL）

    一.线程概论 1.何为线程 每个进程有一个地址空间,而且默认就有一个控制线程.如果把一个进程比喻为一个车间的工作过程那么线程就是车间里的一个一个流水线. 进程只是用来把资源集中到一起(进程只是一个资源 ...

  8. CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3!  更多:http://www.runoob.com ...

  9. C#代码处理网页关于登录的code

    作者:血饮狂龙链接:https://www.zhihu.com/question/49452639/answer/117294801来源:知乎著作权归作者所有,转载请联系作者获得授权. private ...

  10. The memory graph Shared by the method

    Phone类 package com.itheima_03; /* * 手机类 */ public class Phone { String brand; int price; String colo ...