一个浮动 css3效果
Posted you1you
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个浮动 css3效果相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <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(10px);} } @-webkit-keyframes arrow1{ 0%{-webkit-transform: translateY(0);} 100%{-webkit-transform: translateY(10px);} } .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 class="arrow"> <img src="http://paas.mail.10086.cn/res/build/images/c04.png" /> </div> </body> </html>
以上是关于一个浮动 css3效果的主要内容,如果未能解决你的问题,请参考以下文章