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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
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
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
vue实现循环切换动画
2018/10/17 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Python如何判断数独是否合法
2016/09/08 Python
python实现顺时针打印矩阵
2019/03/02 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
银行实习生的自我评价
2014/01/13 职场文书
参观考察邀请函范文
2014/01/29 职场文书
护士的自我鉴定
2014/02/07 职场文书
教师节活动主持词
2014/04/02 职场文书
合作协议书
2014/04/23 职场文书
2015年档案室工作总结
2015/05/23 职场文书
毕业赠语大全
2015/06/23 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Golang 入门 之url 包
2022/05/04 Golang