梦远青城 2013-11-04
本文收录一个来自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/
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->