颤动图像圆角

简介

颤动图像圆角是一种给图片添加颤动效果和圆角边框的方法。颤动效果可以使图片看起来更加生动，圆角边框则可以使图片更加柔和。

实现方法

颤动效果

实现颤动效果的方法很简单，只需要在图片的CSS样式中添加以下代码：

img {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(15deg); }
    60% { transform: rotate(-15deg); }
    75% { transform: rotate(12deg); }
    90% { transform: rotate(-12deg); }
    100% { transform: rotate(0deg); }
}

以上代码中，animation属性指定了颤动动画的效果，shake为动画名称，0.5s为动画时长，cubic-bezier(0.36, 0.07, 0.19, 0.97)为动画速度曲线，infinite为动画重复次数。

@keyframes指令用于定义动画，shake为动画名称，0%表示动画开始状态，100%表示动画结束状态，transform属性用于控制元素的转换，rotate(0deg)表示将元素旋转0度，rotate(-15deg)表示将元素向左旋转15度，rotate(15deg)表示将元素向右旋转15度，rotate(12deg)表示将元素向左旋转12度。

圆角边框

实现圆角边框的方法也很简单，只需要在图片的CSS样式中添加以下代码：

img {
    border-radius: 50%;
    border: 5px solid #fff;
}

以上代码中，border-radius属性用于设置边框的圆角半径，50%表示圆形；border属性用于设置边框样式，5px表示边框宽度，#fff表示边框颜色。

效果展示

通过以上方法，我们可以实现如下效果：

总结

通过颤动效果和圆角边框的组合，我们可以给图片添加生动有趣的效果。以上代码可以很方便地应用在网页设计中，提高网页的美观程度。