梦远青城 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 -->