<style type="text/css">
figure{
float: left;
}
.test1{
border-radius: 0px;
height: 200px;
width: 200px;
overflow: hidden;
ransition-property: border-radius;
transition-duration: .5s;
transition-delay: .5s;
transition: all 1s;
}
.test1:hover{
border-radius: 200px;
box-shadow:0px 0px 22px #ffc8bd;
}
.test2{
transition-duration: .5s;
transition-delay: .5s;
}
.test2:hover{
transform: scale(1.5);
box-shadow:0px 0px 22px #ffc8bd;
}
.test3{
transition-duration: .5s;
transition-delay: .5s;
}
.test3:hover{
transform: rotate(45deg);
box-shadow:0px 0px 22px #ffc8bd;
}
.test4 img{
transition-duration: .5s;
transition-delay: .5s;
opacity: 1;
}
.test4 img:hover{
opacity: 0.5;
box-shadow:0px 0px 22px #ffc8bd;
}</style>
<figure style="margin-left: 130px;" class="test1">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test2">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test3">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test4">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
四张图片，分别都是会伴随盒子阴影。
设置鼠标移上时，四张图像的过渡或变形效果。其中，第一张为直角边框变为圆角边框的过渡效果；第二幅为图片逐渐放大的过渡效果；第三张为图片旋转的变形效果；第四张为图片透明度逐渐变为0的过渡效果
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论