css简单实现图片logo抖动摇晃效果

2018-11-01 17:32:32 作者: 邵先森 浏览: 1051

很多人喜欢邵先森博客以前的logo抖动效果,今天把代码发出来吧。

现在就发一个简单的用纯css实现logo图片摇晃抖动效果,效果需要鼠标放上去才会抖动的,当然,如果需要一直抖动或者鼠标经过时静止的效果也是可以的,

下面就写一下鼠标经过图片logo摇晃抖动的方法

第一步:首先,我们找到logo或者其他图片的代码,

在代码的前面添加代码

第二步:在div结束代码后面加上

最后一步:

引用css样式,css添加到你网站模版下css文件中,一般是style.css,css代码如下:


/*图片img摇啊摇 2017-09-06 15:20:16邵先森博客vier*/
.wuisoxo {
    display: inline-block;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}
.wuisoxo:hover {
    -webkit-animation-name: shake-base;
    -ms-animation-name: shake-base;
    animation-name: shake-base;
    -webkit-animation-duration: 100ms;
    -ms-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running
}

.wuisoxo.freez.wuisoxo-opacity {
    -webkit-animation-name: shake-opacity;
    -ms-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    -ms-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running
}

.wuisoxo.wuisoxo-opacity:hover {
    -webkit-animation-name: shake-opacity;
    -ms-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    -ms-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running
}

.wuisoxo.wuisoxo-constant.wuisoxo-opacity {
    -webkit-animation-name: shake-opacity;
    -ms-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    -ms-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running
}

@-webkit-keyframes wuisoxo-opacity {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.7
    }
    10% {
        -webkit-transform: translate(-4px, 1px) rotate(-1.5deg);

        opacity: 0.1
    }
    20% {
        -webkit-transform: translate(-4px, -4px) rotate(-2.5deg);
        opacity: 0.4
    }
    30% {
        -webkit-transform: translate(-3px, -5px) rotate(-1.5deg);
        opacity: 0
    }
    40% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg);
        opacity: 0.6
    }
    50% {
        -webkit-transform: translate(0px, 0px) rotate(-2.5deg);
        opacity: 0.8
    }
    60% {
        -webkit-transform: translate(-5px, -2px) rotate(1.5deg);
        opacity: 0.4
    }
    70% {
        -webkit-transform: translate(-1px, 3px) rotate(-0.5deg);
        opacity: 0.1
    }
    80% {
        -webkit-transform: translate(-2px, -2px) rotate(1.5deg);
        opacity: 0.2
    }
    90% {
        -webkit-transform: translate(-3px, -3px) rotate(1.5deg);
        opacity: 0.3
    }
}
@-ms-keyframes wuisoxo-opacity {
    0% {
        -ms-transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.9
    }
    10% {
        -ms-transform: translate(0px, -4px) rotate(-1.5deg);
        opacity: 0.9
    }
    20% {
        -ms-transform: translate(-2px, 0px) rotate(0.5deg);
        opacity: 0
    }
    30% {
        -ms-transform: translate(-1px, 1px) rotate(-2.5deg);
        opacity: 0.8
    }
    40% {
        -ms-transform: translate(-2px, 4px) rotate(-1.5deg);
        opacity: 0.9
    }
    50% {
        -ms-transform: translate(-4px, 2px) rotate(-2.5deg);
        opacity: 0.1
    }
    60% {
        -ms-transform: translate(3px, 0px) rotate(0.5deg);
        opacity: 0
    }
    70% {
        -ms-transform: translate(-4px, -5px) rotate(-0.5deg);
        opacity: 0
    }
    80% {
        -ms-transform: translate(4px, -1px) rotate(1.5deg);
        opacity: 0.7
    }
    90% {
        -ms-transform: translate(4px, 0px) rotate(1.5deg);
        opacity: 0.9
    }
}
@keyframes wuisoxo-opacity {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.6
    }
    10% {
        transform: translate(-2px, -1px) rotate(-0.5deg);
        opacity: 0.5
    }
    20% {
        transform: translate(-4px, 4px) rotate(1.5deg);
        opacity: 0.4
    }
    30% {
        transform: translate(-4px, -1px) rotate(-1.5deg);
        opacity: 0.8
    }
    40% {
        transform: translate(-2px, -1px) rotate(-2.5deg);
        opacity: 0.3
    }
    50% {
        transform: translate(-4px, 1px) rotate(-2.5deg);
        opacity: 0.5
    }
    60% {
        transform: translate(-2px, 4px) rotate(0.5deg);

        opacity: 0.1
    }
    70% {
        transform: translate(-3px, 1px) rotate(-0.5deg);
        opacity: 0.4
    }
    80% {
        transform: translate(0px, 0px) rotate(-0.5deg);
        opacity: 0.5
    }
    90% {
        transform: translate(2px, -1px) rotate(-2.5deg);
        opacity: 0.8
    }
}


评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的