CSS3实现红包抖动效果


Posted in HTML / CSS onDecember 23, 2020

有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~
这里用到了transform: rotate()属性,加上animation实现动画效果,不多说上代码

.red_packet {
  width: 180rpx;
  height: 220rpx;
  position: fixed;
  top: 10rpx;
  right: 20rpx;
  color: #D60E19;
  animation: shake .5s linear infinite;
}
@keyframes shake {

  25% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }

  50%,
  100% {
    transform: rotate(0);
  }
}

开始实现的效果是这样式的

CSS3实现红包抖动效果

一直在左右摆动,但要实现的效果是隔几秒抖两下,animation不支持间隔时间动画怎么办呢?百度了一番,可以通过设置百分比,前三秒不动,从70%的时候开始抖动,而且要快准狠,改良了一番,效果如下:

CSS3实现红包抖动效果

.red_packet {
  width: 180rpx;
  height: 220rpx;
  position: fixed;
  top: 10rpx;
  right: 20rpx;
  color: #D60E19;
  animation: shake 3s linear infinite;
}

@keyframes shake {

  70%, 80% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }

  65%,
  85% {
    transform: rotate(0);
  }
}

到此这篇关于CSS3实现红包抖动效果的文章就介绍到这了,更多相关CSS3红包抖动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 #HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 #HTML / CSS
html+css3实现的登录界面
Dec 09 #HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 #HTML / CSS
CSS3 实现的火焰动画
Dec 07 #HTML / CSS
CSS3 实现的加载动画
Dec 07 #HTML / CSS
You might like
多文件上载系统完整版
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
js opener的使用详解
2014/01/11 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python发展简史 Python来历
2019/05/14 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Django中间件基础用法详解
2019/07/18 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python程序控制语句用法实例分析
2020/01/14 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
店长岗位的工作内容
2013/11/12 职场文书
办理信用卡工作证明
2014/01/11 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
收款委托书
2014/10/14 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
个人汇报材料范文
2014/12/30 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python