css 图像时间变换 |css中vh和wh的用法

/* 方法一：使用transform属性 */
img {
transform: rotate(45deg);
transition: transform 1s ease-out;
}
img:hover {
transform: rotate(360deg);
}
/* 方法二：使用animation属性 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img {
animation: rotate 2s linear infinite;
}
/* 方法三：使用transition和opacity属性 */
img {
opacity: 1;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 0;
}

以上这几种方法都有其独特的效果。第一种方法使用的是CSS3的transform属性，通过控制图片的旋转角度来实现时间变换。第二种方法则是使用CSS3的animation属性，通过关键帧来控制图片的旋转行为。而第三种方法则是利用了CSS3的transition和opacity属性，通过使图片透明度变化来实现时间变换的效果。

除了以上三种方法外，大家还可以使用其他一些方法来实现时间变换效果。比如说，大家可以使用滤镜来对图片进行处理，也可以使用CSS3的transform属性来对图片进行缩放。

总之，使用CSS来实现图像时间变换是一种很有趣的技巧，它可以为大家的网页增加很多动感和趣味性。而到底使用哪一种方法，则要根据需要和效果进行选择。