类似心跳的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