1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>css3 圣诞红包雨效果</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.          ul{
  12.              list-style: none;
  13.          }
  14.          .cc{
  15.              width: 100%;
  16.              height: 500px;
  17.             overflow: hidden;
  18.          }
  19.          .outer{
  20.              position: relative;
  21.              width: 200px;
  22.             height: 600px;
  23.             animation:move 6s forwards;
  24.             /* transition:all .2s;*/
  25.          }
  26.          @keyframes move{
  27.              0%{
  28.                  transform: translateX(0);
  29.              }
  30.              50%{
  31.                  transform: translateX(600px);
  32.              }
  33.              100%{
  34.                  transform: translateX(1200px);
  35.              }
  36.          }
  37.         .festival_fly {
  38.             visibility: hidden;
  39.             position: absolute;
  40.             left:0;
  41.             top:0;
  42.             z-index: 400;
  43.             width: 200px;
  44.             height: 48px;
  45.             background: url(images/sd01.png) no-repeat left top;
  46.             animation: flyMove 1s steps(9) infinite;
  47.         }
  48.         .festival_fly .link {
  49.             display: block;
  50.             height: 100%;
  51.             width: 100%;
  52.         }
  53.         .festival_fly .close {
  54.             position: absolute;
  55.             top: -5px;
  56.             right: -5px;
  57.         }
  58.         .couten {
  59.             position: absolute;
  60.             top: 0;
  61.             left:0;
  62.             z-index: 20;
  63.         }
  64.         .couten li {
  65.             position: absolute;
  66.             width: 67px;
  67.             height: 100px;
  68.             background: url(images/sd02.png);
  69.             opacity: 0;
  70.             transform: scale(0.3);
  71.             animation-duration: 6s;
  72.             animation-iteration-count: 1;
  73.             cursor: pointer;
  74.         }
  75.  
  76.         .couten li.rain.stop {
  77.             animation-iteration-count: 0;
  78.         }
  79.  
  80.         .couten li.rain {
  81.             animation-name: falling;
  82.         }
  83.         @keyframes flyMove{
  84.             0% {
  85.                 background-position: 0 0;
  86.             }
  87.             100% {
  88.                 background-position: 0 -432px;
  89.             }
  90.         }
  91.         @keyframes falling {
  92.             0% {
  93.                 transform: translate3d(0, 0, 0) rotate(0deg) scale(0.3);
  94.                 opacity: 1;
  95.             }
  96.             70% {
  97.                 opacity: 1;
  98.             }
  99.             100% {
  100.                 transform: translate3d(-100px, 935px, 0) rotate(50deg) scale(1);
  101.                 opacity: 0;
  102.             }
  103.         }
  104.  
  105.     </style>
  106. </head>
  107. <body>
  108. <div class="cc">
  109.     <div class="outer">
  110.         <div class="festival_fly flyIn flySide" id="festival_fly" style="visibility: visible;">
  111.             <a class="link" class="close">
  112.                 <img src="https://p.ssl.qhimg.com/d/inn/89e080e6/close.png">
  113.             </a>
  114.         </div>
  115.         <ul class="couten">
  116.             <li class="li rain stop" style="animation-delay: 0s; animation-play-state: paused;"></li>
  117.             <li class="li rain stop" style="animation-delay: 0.3s; animation-play-state: paused;"></li>
  118.             <li class="li rain" style="animation-delay: 0.6s;"></li>
  119.             <li class="li rain" style="animation-delay: 0.9s;"></li>
  120.             <li class="li rain" style="animation-delay: 1.2s;"></li>
  121.             <li class="li rain" style="animation-delay: 1.5s;"></li>
  122.             <li class="li rain" style="animation-delay: 1.8s;"></li>
  123.             <li class="li rain" style="animation-delay: 2.1s;"></li>
  124.             <li class="li rain" style="animation-delay: 2.4s;"></li>
  125.             <li class="li rain" style="animation-delay: 2.7s;"></li>
  126.             <li class="li rain" style="animation-delay: 3s;"></li>
  127.             <li class="li rain" style="animation-delay: 3.3s;"></li>
  128.             <li class="li rain" style="animation-delay: 3.6s;"></li>
  129.             <li class="li rain" style="animation-delay: 3.9s;"></li>
  130.             <li class="li rain" style="animation-delay: 4.2s;"></li>
  131.             <li class="li rain" style="animation-delay: 4.5s;"></li>
  132.             <li class="li rain" style="animation-delay: 4.8s;"></li>
  133.             <li class="li rain" style="animation-delay: 5.1s;"></li>
  134.             <li class="li rain" style="animation-delay: 5.4s;"></li>
  135.             <li class="li rain" style="animation-delay: 5.7s;"></li>
  136.         </ul>
  137.     </div>
  138. </div>
  139. </body>
  140. </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. vue做的简单购物车

    <code><!DOCTYPE html><html><head lang="en"> <meta charset=" ...

  2. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

  3. 使用k8s创建容器一直处于ContainerCreating状态

    容器报错信息为(两种): FailedSynError syncing pod, skipping: failed to {kubelet 127.0.0.1} Warning FailedSync ...

  4. 撩课-Java每天5道面试题第22天

    141.Spring AOP是什么? AOP:面向切面编程 AOP技术利用一种称为“横切”的技术, 解剖封装的对象内部, 并将那些影响了多个类的公共行为 封装到一个可重用模块, 这样就能减少系统的重复 ...

  5. 撩课-Java每天10道面试题第2天

    11.面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面, 以便更充分地注意与当前目标有关的方面. 抽象并不打算了解全部问题,而只是选择其中的一部分, 暂时不用部分细 ...

  6. mybatis之typehandles

    mybatis之typehandles 无论是Mybatis在预处理语句PreparedStatement中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器将获取的值以合适的方式转换成ja ...

  7. JSP简单实现统计网页访问次数

    JSP简单实现统计网页访问次数 需求:统计网页的访问次数 核心思想:利用application对象,将访问次数的信息放入application对象中,每次访问就+1.这里利用了application对 ...

  8. python_tensorflow_Django实现逻辑回归

    1.工程概要 2.data文件以及input_data文件准备 链接:https://pan.baidu.com/s/1EBNyNurBXWeJVyhNeVnmnA 提取码:4nnl 3.logiss ...

  9. 关于java赋值运算的一个小例子

    直接贴代码,这个也是做题目中遇见的,觉得很好奇,查了一波,然后自己编写代码看了一下,果真如此,哈哈哈...... public class 关于Boolean的赋值运算 { public static ...

  10. JavaScript的进阶之路（五）理解数组1

    数组是值得有序结合,每个值叫做一个元素,每个元素的位置称为索引,索引从0开始. 在JavaScript中,数组是对象的特殊形式.继承自Array.prototype中的属性,有丰富的数组操作方法. 通 ...