CSS3 keyframe 红包动画

项目专题页需要有一个红包的动画，就做了一个最简单的放大缩小的动画效果，主要用到的就是 CSS3 的 keyframe 动画和 transform、transition 属性。为了使动画看起来更舒适，我把动画时长设置成4S，而实际运动的时长只有1S左右，来达到增加动画间隔的效果。
代码如下：

.hongbao{animation: hongBao 4s ease infinite;
}
@keyframes hongBao{0% {-webkit-transform: scale(1);transform: scale(1);    }50% {-webkit-transform: scale(1);transform: scale(1);}55% {-webkit-transform: scale(1.1);transform: scale(1.1);}60% {-webkit-transform: scale(1);transform: scale(1);}65% {-webkit-transform: scale(1.2);transform: scale(1.2);}70% {-webkit-transform: scale(1);transform: scale(1);}100% {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes hongBao{0% {-webkit-transform: scale(1);transform: scale(1);    }50% {-webkit-transform: scale(1);transform: scale(1);}55% {-webkit-transform: scale(1.1);transform: scale(1.1);}60% {-webkit-transform: scale(1);transform: scale(1);}65% {-webkit-transform: scale(1.2);transform: scale(1.2);}70% {-webkit-transform: scale(1);transform: scale(1);}100% {-webkit-transform: scale(1);transform: scale(1);}
}

转载于:https://www.cnblogs.com/linxue/p/9633594.html

CSS3 keyframe 红包动画相关推荐

拆红包动态效果html5,用React加CSS3实现微信拆红包动画效果
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { he ...
html微信拆红包动画特效,实例详解用React加CSS3实现微信拆红包动画效果
本文主要介绍了用React加CSS3实现微信拆红包动画效果,微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,希望能 ...
css 微信红包,用React加CSS3实现微信拆红包动画
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { he ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
html微信拆红包,用React加CSS3实现微信拆红包动画_html/css_WEB-ITnose
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { height ...
css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画
© Young 2018-12-26 21:43 Welcome to My GitHub 一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图 ...
CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
css3圆形轨迹动画
<!doctype html> <html lang="en"> <head> <meta char ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...

CSS3 keyframe 红包动画

CSS3 keyframe 红包动画相关推荐

最新文章

热门文章