纯CSS实现图片上下抖动

本文转载自查看原文 2018-08-20 18:15 1448 jQuery 、CSS3的特效

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【vue】css解决“防抖动”——防止页面加载图片抖动 Jquery实现抖动效果用css实现图片翻转 CSS3动画之按钮抖动【CSS】纯css实现立体摆放图片效果 CSS3实现图片滚动 CSS实现文字环绕图片 css实现图片切换 css实现图片缓慢放大 css实现16:9的图片比例