图片下落效果
Posted dongma
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片下落效果相关的知识，希望对你有一定的参考价值。
利用css的 animation 实现
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .san{ left: 10%; top: 20%; -webkit-animation:dn400 3s 0s ease both; -moz-animation:dn400 3s 0s ease both; /*使用dn400 这个效果*/ animation:dn400 3s 0s ease both; } /*定制效果*/ @-webkit-keyframes dn400{0%{opacity:0;-webkit-transform:translateY(-400px);} 100%{opacity:1;-webkit-transform:translateY(0);}} @-moz-keyframes dn400{0%{opacity:0;-moz-transform:translateY(-400px);} 100%{opacity:1;-moz-transform:translateY(0);}} @-o-keyframes dn400{0%{opacity:0;-o-transform:translateY(-400px);} 100%{opacity:1;-o-transform:translateY(0);}} @keyframes dn400{0%{opacity:0;transform:translateY(-400px);} 100%{opacity:1;transform:translateY(0);}} </style> <body> <img src="static/images/san.png" class="san" /> <form action=""> <input type="submit" value="提交" > </form> </body> </html>
以上是关于图片下落效果的主要内容，如果未能解决你的问题，请参考以下文章