用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来做动画,所 ...
随机推荐
- 【vim】正常模式下的一般操作
正常模式一般用于浏览文本,其实也就是通过键盘命令让光标在文本中跳来跳去,在任何模式下按一次或两次<Esc>会进入正常模式. 基本思想 vim对光标的定位操作非常精确和高效,这是它的一个非常 ...
- Linux 历史信息history显示执行时间
fc命令 fc命令自动掉用vi编辑器修改已有历史命令,当保存时立即执行修改后的命令,也可以用来显示历史命令.fc命令编辑历史命令时,会自动调用vi编辑器.fc保存文件后,会自动执行所编辑过的命令. 测 ...
- iOS 之新特性界面
1.什么事新特性界面? 新特性界面就是第一次下载程序出现的界面,他的用途是帮助用户快速了解这款APP,所有说还是很有必要学一下的. 2.如何实现新特性界面? 实现思路:从本质上看,新特性界面就是一个全 ...
- 1.2 Percona XtraDB Cluster Limitations
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- mfix中输出DEM颗粒的固相速度到网格
基于mfix-19.1.2版本 方法一:直接输出差值网格固相速度 注:这种方式只适用于garg 2012颗粒差值格式在DEM中,默认是无法输出固相速度的网格值的: 但是通过搜索des文件夹下V_s关键 ...
- 快速沃尔什变换 FWT 学习笔记【多项式】
〇.前言 之前看到异或就担心是 FWT,然后才开始想别的. 这次学了 FWT 以后,以后判断应该就很快了吧? 参考资料 FWT 详解 知识点 by neither_nor 集训队论文 2015 集合幂 ...
- centos7嵌入式环境搭建
1. 在网上搜索下载交叉编译器arm-linux-gcc文件,我下载的是:arm-2014.05-29-arm-none-linux-gnueabi-i686-pc-linux-gnu.tar.bz2 ...
- Linux快速查看某条命令的版本和存放的位置(ls -l `which mvn`)
输入: ls -l `which mvn` 如图:
- window.name实现跨域
在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中,我提到了几种跨域的方式,这里主要讲解使用window.name实现跨域. 跨域就 ...
- 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?
第一部分: 浏览器缓存如何控制? 最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明: 浏览器向服务器请求 ...