18行CSS代码实现元素抖动效果
by 毛三胖 on 2018年03月06日
阅:349赞:6

代码

.face:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

示例

说明

在进行一般PC端网站建设时,为增加交互,常会用到元素抖动效果。本文整理了一段纯CSS3实现的代码,效果很好且代码很短。

背景知识

CSS :hover 选择器

:hover 选择器用于选择鼠标指针浮动在上面的元素。

w3school CSS :hover

CSS3 animation 属性

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name 规定需要绑定到选择器的 keyframe 名称。
  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。

w3school CSS3 animation

cubic-bezier

cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,语法:cubic-bezier(<x1>, <y1>, <x2>, <y2>)

cubic-bezier.com

CSS3 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate3d(x,y,z) 定义 3D 转换。

w3school CSS3 transform

菜鸟教程 CSS3 3D 转换

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。