不少前端开发者会用到css3特效,今天在做页面时用到了一个上下浮动的效果,分享一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background: #639; width: 235px; height: 216px; position: absolute; top: 300px; left: 300px; } /*nimation-delay:1s*/ @keyframes arrow1{ 0%{transform: translateY(0);} 100%{transform: translateY(20px);} } @-webkit-keyframes arrow1{ 0%{-webkit-transform: translateY(0);} 100%{-webkit-transform: translateY(20px);} } .arrow{ animation: arrow1 2s infinite; -webkit-animation: arrow1 2s infinite; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; animation-direction:alternate; } </style> </head> <body> <div> <img src="images/gyy_18.jpg" /> </div> </body> </html>
通过以上代码就能实现。
相关文章
热门文章
相关案例