[分享]css中怎么做图片的变化

.box{ width: 200px; height: 200px; background-image: url('https://picsum.photos/200/200'); background-size: cover; border-radius: 50%; transition: transform 1s; } .box:hover{ transform: rotate(360deg); }

在CSS中，我们可以通过各种方法来改变图片的展现方式和样子，今天我们来讨论一下如何通过 CSS 控制图片的变化效果。

首先，我们可以通过 background-image 属性来在元素中添加背景图片，例如下面这段代码：

.box{
   background-image: url('https://picsum.photos/200/200');
} 

这样就可以在指定的元素中添加图片。但是，这只是图片的展现方式，并没有控制它的变化效果。

如果想要在鼠标浮上去的时候，让图片旋转一圈呢？可以通过 transform 属性来控制元素的变换效果，例如：

.box:hover{
   transform: rotate(360deg);
} 

这样设置后，当鼠标浮上去时，图片会顺时针旋转一圈。同时，为了让变化效果更加平滑，我们还可以给元素添加 transition 属性，例如：

.box{
   transition: transform 1s;
} 

这样设置后，图片每次变化时，都会有1秒钟的过渡时间，变化效果更加流畅。

综合上面的样式设置，我们可以得到下面的 HTML 结构和 CSS 样式，来实现图片旋转效果：

<div class="box"></div> 

.box{
   width: 200px;
   height: 200px;
   background-image: url('https://picsum.photos/200/200');
   background-size: cover;
   border-radius: 50%;
   transition: transform 1s;
}
.box:hover{
   transform: rotate(360deg);
} 

这样就可以在页面中展现出一个旋转的图片了，是不是很有意思呢？不仅如此，当然还有更多的样式和效果可以探索和实现，希望大家可以多多尝试。