css3 圣诞红包雨效果

<!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>

转载于:https://www.cnblogs.com/dongxiaolei/p/8109150.html

css3 圣诞红包雨效果相关推荐

iOS之CALayer的CAEmitterLayer实现“红包雨”效果
CAEmitterLayer(粒子发生器) 一.基本简介 CAEmitterLayer是CALayer的一个子类,和CAEmitterCell一起使用可以创造出多样的动画效果. CAEmitterLa ...
php 红包雨,vue移动端实现红包雨效果
本文实例为大家分享了vue实现红包雨效果的具体代码,供大家参考,具体内容如下下面是代码: :class="item.cls" :data-index="index&qu ...
android实现红包雨效果,vue移动端实现红包雨效果
这篇文章主要为大家详细介绍了vue移动端实现红包雨效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现红包雨效果的 ...
php微信红包雨效果,【微信红包雨】原来红包还可以这么玩！你造吗？
原标题:[微信红包雨] 原来红包还可以这么玩!你造吗? 哈啰,大家好,我是林涛今天用实战演练的方法带着小伙伴们做"精推". 每一次体验的小伙伴们想必被今晚的红包雨吓到了,事实上我 ...
php微信红包雨效果,微信红包雨特效口令大全微信红包雨特效口令有哪些
微信红包雨特效口令有哪些?新年牛气冲天,在微信有一场大型的红包雨送给玩家.那么特效口令有哪些呢,下面小编给大家带来微信红包雨特效口令大全,一起来看看吧. 微信红包雨特效口令大全一.王者荣耀 [排位] ...
android 红包雨源代码,Android 红包雨效果自定义控件
WX20201231-181616@2x.png 思路:利用Path绘制动画轨迹,再使用PathMeasure获取轨迹中的坐标位置实时改变view的坐标完成红包动画. 封装一个红包容器view用于管理 ...
h5红包雨代码_js+css实现红包雨效果
本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分红包的样子,先写一个模版在页面上显示红包的容器 2.js部分 const $redPackage = $ ...
JS 实现红包雨效果，倒计时开红包兼容移动端
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下: JS代码 function randomNum(minNum, maxNum) {switch (argum ...
红包雨效果html,js+css实现红包雨效果
//每一个红包都是相对于父元素定位,通过z-index来设置层级 let zIndex = 1; function bindEvent() { $redPackage.on('click','.js- ...
android 开红包动画,Android实现红包雨动画效果
本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助红包雨关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { publi ...

css3 圣诞红包雨效果

css3 圣诞红包雨效果相关推荐

最新文章

热门文章