css animation fade in
<html> <style> @-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} @-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} @keyframes fadeIn{0%{opacity:0}100%{opacity:1}} .fade-in{ animation-name: fadeIn; animation-timing-function: ease; animation-direction: normal; animation-play-state: running; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-direction: normal; -webkit-animation-play-state: running; } .icon-arrow{ display: block; position: absolute; left: 50%; width: 40px; height: 40px; margin-left: -20px; background: url("http://www.lewanau.com/public/weixin/css/img/icon-arrow.png") no-repeat left center; -webkit-animation: arrow-ani 1s linear infinite; -o-animation: arrow-ani 1s linear infinite; animation: arrow-ani 1s linear infinite; } @-o-keyframes arrow-ani { from{ bottom:4%; opacity: 1; } to{ bottom:6%; opacity: 0; } } @-webkit-keyframes arrow-ani { from{ bottom:4%; opacity: 1; } to{ bottom:6%; opacity: 0; } } @keyframes arrow-ani { from{ bottom:4%; opacity: 1; } to{ bottom:6%; opacity: 0; } } </style> <body style="background:#666"> <div class="animation fade-in" > <span class="icon-arrow"></span> </div> </body> </html>
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。