<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @keyframes mylogo { from {top: 5px;} to {top: -5px;} } @-moz-keyframes mylogo /* Firefox */ { from {top: 5px;} to {top: -5px;} } @-webkit-keyframes mylogo /* Safari 和 Chrome */ { from {top: 5px;} to {top: -5px;} } @-o-keyframes mylogo /* Opera */ { from {top: 5px;} to {top: -5px;} } .imagelogo { background: url(img/0.jpg) no-repeat; float: left; position:relative; width: 400px; height: 400px; margin: 30px auto; padding: 0px; cursor: pointer; animation: mylogo 0.1s linear 0s infinite alternate; /* Firefox: */ -moz-animation: mylogo 0.1s linear 0s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: mylogo 0.1s linear 0s infinite alternate; /* Opera: */ -o-animation: mylogo 0.1s linear 0s infinite alternate; } </style> </head> <body> <div class="imagelogo"></div> </body> </html>
纯CSS实现图片上下抖动
猜你喜欢
转载自www.cnblogs.com/wolflower/p/9507141.html
今日推荐
周排行