CSS3动画箭头 http://www.cnblogs.com/wangyongx/p/6052672.html
原理就是，使用一个角的边框，然后旋转
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<style type="text/css"> .arrow { display: block; width: 20px; height: 20px; position: absolute; bottom: 25px; left: 50%; margin-left: -11px; border: 3px solid transparent; border-top: 3px solid #000; border-left: 3px solid #000; z-index: 99; opacity: .8; -webkit-transform: rotate(45deg); -webkit-animation: arrow 1.5s infinite ease-in-out; } @-webkit-keyframes arrow { 0% { opacity:0; -webkit-transform:translate(0, 0px) rotate(45deg) } 50% { opacity:1; -webkit-transform:translate(0, -5px) rotate(45deg) } 100% { opacity:0; -webkit-transform:translate(0, -10px) rotate(45deg) } } </style> <div class="arrow"></div> |
