admin管理员组文章数量:1794759
css 添加动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 1.6s infinite; -webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */ } @keyframes mymove { from{transform:translate(0,0)} to{transform:translate(0,15px)} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } 添加动画 .div{ transition:margin-top 1s; -moz-transition:margin-top 1s; /* Firefox 4 */ -webkit-transition:margin-top 1s; /* Safari and Chrome */ -o-transition:margin-top 1s; /* Opera */ &:hover{ margin-top: 30px; // transition: all .2s ease-in-out; //这是滑入划出的动画 top: -100%; } } </style> </head> <body> <p><strong>注意:</strong> @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p> <div></div> </body> </html>
版权声明：本文标题：css 添加动画 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971750a123963.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论