[分享]css3把一张图片做成***

CSS3的强大功能可以让我们实现很多有趣的效果，比如把一张图片做成***的效果。

/*样式代码*/
img{
    position:relative;
}
img:hover{
    animation: explode 0.5s ease-out;
}
@keyframes explode{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(1.5);
        opacity: 0;
    }
} 

首先，我们需要设置图片的position属性为relative。这是因为我们后面需要为图片设置animation属性，而animation属性只对position属性为relative或者absolute的元素有效。

接着，我们使用:hover伪类为图片设置鼠标悬浮时的动画。

animation属性用来为元素设置动画，其中第一个参数为动画名称，第二个参数为动画持续时间，第三个参数为动画缓动函数。

我们定义了一个名为explode的动画，其中包含两个关键帧（keyframes）：0%和100%。

0%的状态下，图片的transform属性为scale(1)，即不做任何缩放；opacity属性为1，即图片不透明。

100%的状态下，图片的transform属性为scale(1.5)，即放大至1.5倍；opacity属性为0，即完全透明。

最后，我们在样式表的末尾使用@keyframes关键字定义了动画中应用的关键帧，将其命名为explode。

这样，当我们鼠标悬浮在图片上时，就会实现图片***的效果。当然，如果你需要更加细致的调整动画效果或者将其应用到其他元素上，也可以随意修改代码，进行灵活的调整。