用css动画写一个下红包雨的效果
红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合。大概代码逻辑:
@keyframes startHB {
0% {
transform: translateY(-300px);
-ms-transform:translateY(-300px);
-webkit-transform:translateY(-300px);
}
100% {
transform: translateY(100vh);
-ms-transform:translateY(100vh);
-webkit-transform:translateY(100vh);
}
}
@keyframes chandou{
0%{margin-left:-120px}
50%{margin-left:0px}
100%{margin-left:120px}
}
$total: 100;
@for $i from 1 through $total {
.hbsd-#{$i}{
animation: startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;
-ms-animation:startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;
-webkit-animation:startHB #{$i/20}s linear infinite,chandou #{$i/20}s infinite linear alternate both;
}
}
完整代码地址:
https://github.com/BothEyes1993/hongbao
用css动画写一个下红包雨的效果的更多相关文章
- 今天七夕节,外面下着大雨,用Python的tkinter做一个下爱心雨的特效,发给妹子
今天七夕,还下着雨,刚好想做一个下着爱心雨的特效 准备图片素材 1.美图秀秀找一个爱心图,大小就50*50就可以,生成的是一个png格式文件 2.由于canvas.create_image只支持gif ...
- css手写一个表头固定
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
- 用css来写一个背景图片的切换
代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...
- 基于Vue手写一个下拉刷新
当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...
- 利用Scrollow写一个下拉刷新
利用scrollView滑动的2个监听方法实现 //滑动结束时候 出发的方法 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView ...
- css样式写一个三角形
<style> .test{ border-color:transparent #abcdef transparent transparent; border-style:solid; b ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 前端深入之css篇丨2020年前,彻底掌握css动画【transition】
写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
- 前端深入之css篇丨2020年前,彻底掌握css动画【animation】
写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
随机推荐
- [Swift实际操作]八、实用进阶-(2)Swift语言中的三种消息传递模式
本文将通过响应按钮的点击事件,来演示Target-Action消息传递机制,该机制主要用于响应用户的界面操作.打开创建的空白项目.然后在左侧的项目导航区,打开视图控制器的代码文件:ViewContro ...
- [转] 红帽7搭建Zabbix监控
zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...
- Java常见错误及解决方案
1.类定义未找到:java.lang.NoClassDefFoundError java类文件没有上传:上传了,服务器没找到,建议将JSP页面重新更新或重启服务器. 2.
- 总结day13 ----内置函数
内置函数 我们一起来看看python里的内置函数.什么是内置函数?就是Python给你提供的,拿来直接用的函数,比如print,input等等.截止到python版本3.6.2,现在python一共为 ...
- Python元类编程
来源:http://python.jobbole.com/88582/ @property装饰器,是将类中的函数当做属性调用 Python类中定义的属性,如果属性名前面只有一个下划线,那么就是一种规范 ...
- java的应用,SVN客户端的安装教程
1.先注册一个百度云账号,然后打开https://console.bce.baidu.com 这个网站,按照下面的图形点击 !!!!请注意这是要收钱的,但能学习到那用微信打开你的网站也是值得的. 2. ...
- 架构师养成记--21.netty编码解码
背景 作为网络传输框架,免不了哟啊传输对象,对象在传输之前就要序列化,这个序列化的过程就是编码过程.接收到编码后的数据就需要解码,还原传输的数据. 代码 工厂类 import io.netty.han ...
- QuantLib 金融计算——数学工具之求解器
目录 QuantLib 金融计算--数学工具之求解器 概述 调用方式 非 Newton 算法(不需要导数) Newton 算法(需要导数) 如果未做特别说明,文中的程序都是 Python3 代码. Q ...
- geatpy - 遗传和进化算法相关算子的库函数(python)
Geatpy The Genetic and Evolutionary Algorithm Toolbox for Python Introduction Website (including doc ...
- SPOJ Lexicographical Substring Search 求字典序第k大子串 后缀自动机
题目传送门 思路:按字典序,小的字符优先选取.对于一个字符,如果以这个字符开头的子串大于等于k个,那说明这个字符是应该选的,并且选完之后,可能还要继续选.如果以这个字符开头的子串小于k个,说明这个字符 ...