<!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. Python 逐行分割大txt文件

    # -*- coding: <encoding name> -*- import io LIMIT = 150000 file_count = 0 url_list = [] with i ...

  2. 访问Django项目出现DisallowedHost at / Invalid HTTP_HOST header问题

    闲来无事,想玩玩django,源码安装碰到了一堆乱七八糟依赖性问题,耗费一下午的时间总算是在ubuntu14.04上搭建好了python3+django2开发环境, 心血来潮,创建了一个django项 ...

  3. 秒懂String，StringBuilder与StringBuffer

    StringBuilder与StringBuffer: StringBuilder:线程不安全 StringBuffer:线程安全 当我们在字符串缓冲区被多个线程使用时,JVM不能保证StringBu ...

  4. SpringBoot 初体验

    1.Spring Boot 简介 简化Spring应用开发的一个框架 整个Spring技术栈的一个大整合 J2EE开发的一站式解决方案 2.微服务 2014, martin fowler 微服务:架构 ...

  5. DButils分析

    package com.ldf.utils; import java.sql.Connection; public class DBUtils { private static String driv ...

  6. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  7. CSS实现太极图（3个div实现）

    使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...

  8. Mac Iterm 或者自带终端 bogon:~ username$

    mac 在用Iterm2 遇到命令行前缀自带 bogon:~ username$ 太长问题.有代码洁癖的我,终于找到了解决办法. 具体问题见下图: 而我想要的结果是: 解决办法:是安装 Oh My Z ...

  9. drupal7在page中直接输出区块

    //正规方法:$block = block_load('block', '1');// block_load($module, $delta) block.module 行 714 $output = ...

  10. 转：在使用angularjs过程，ng-repeat中track by的作用

    转载:链接 <div ng-repeat="links in slides"> <div ng-repeat="link in links track ...