类似心跳的banner动画
本文收录一个来自alipay活动页的动画:
核心代码:
@keyframes scale { 0% { transform: scale(1); } 1% { transform: scale(1.15); } 2% { transform: scale(1); } 100% { transform: scale(1); } } @-webkit-keyframes scale { 0% { -webkit-transform: scale(1); } 1% { -webkit-transform: scale(1.15); } 2% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes scale { 0% { -moz-transform: scale(1); } 1% { -moz-transform: scale(1.15); } 2% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); } }
.scale { transform: scale(1); -webkit-transform: scale(1); animation: scale 5s linear 0s infinite; -moz-animation: scale 5s linear 0s infinite; -webkit-animation: scale 5s linear 0s infinite; }
具体事例:
http://jsfiddle.net/zhangyaochun/8sjs5/
相关推荐
sunshineboyleng 2020-07-08
bertzhang 2019-12-14
impress 2020-05-11
yaodilu 2020-04-30
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
tianzyc 2020-02-19
冰蝶 2020-02-16
lanzhusiyu 2020-02-03
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20