纯CSS实现图片上下抖动 

<!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>

 

posted @ 2018-08-20 18:15  和路雪  阅读(3150)  评论(0)    收藏  举报