css3相框图片摇晃动画

CSS3相框图片摇晃动画是一种非常炫酷的动画效果，它可以让相框中的图片摇晃起来，增强用户的体验感，下面我们来看一下实现这个动画效果的CSS3样式：

.pic-frame {
        position: relative;
}
.pic-frame img {
        width: 100%;
        height: 100%;
}
@keyframes shake {
    0% {
    transform: rotate(0);
}
    10% {
    transform: rotate(-5deg);
}
    20% {
    transform: rotate(5deg);
}
    30% {
    transform: rotate(-5deg);
}
    40% {
    transform: rotate(5deg);
}
    50% {
    transform: rotate(-5deg);
}
    60% {
    transform: rotate(5deg);
}
    70% {
    transform: rotate(-5deg);
}
    80% {
    transform: rotate(5deg);
}
    90% {
    transform: rotate(-5deg);
}
    100% {
    transform: rotate(0);
}
}
.pic-frame:hover img {
        animation-name: shake;
        animation-duration: 0.8s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        transform-origin: center center;
}
    

代码解析：

1、我们首先给相框的父容器设置一个相对定位。

2、然后给相框中的图片设置宽高都为100%。

3、接着我们使用了一个名为shake的关键帧动画，它将根据时间轴的不同，让图片在不同的角度来回摇晃。

4、我们使用:hover伪类来判断用户鼠标是否放在了相框上，如果是，那么就启动shake动画，并且使用动画结束后最终位置的方式来保持摇晃后的位置。

综上所述，CSS3相框图片摇晃动画是一种很不错的动画效果，它可以提升用户的体验感，给用户带来更好的视觉效果，有兴趣的朋友可以试着加入自己的网站中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！