html 图片的过渡效果,3个CSS3图片过渡动画特效

CSS

语言：

CSSSCSS

确定

div {

width: 200px;

height: 200px;

margin-top: 100px;

margin-left: 100px;

float: left;

}

.div1 img {

transition-property: all;

transition-duration: 4s;

transition-delay: 0s, 1s, 0s;

border: solid 2px #000000;

border-radius: 10px;

}

.div1>img:hover {

border-radius: 90px;

box-shadow: 5px 3px 5px #03040a;

}

.div2 {

overflow: hidden;

border-radius: 10px;

border: solid 2px #000000;

}

.div2 img {

transition-property: all;

transition-duration: 4s;

transition-delay: 0s, 1s, 0s;

width: 200px;

height: 200px;

}

.div2>img:hover {

width: 300px;

height: 300px;

box-shadow: 5px 3px 5px #03040a;

}

.div3 img {

transition-property: all;

transition-duration: 4s;

transition-delay: 0s, 1s, 0s;

border: solid 2px #000000;

border-radius: 10px;

}

.div3>img:hover {

transform: rotate(90deg);

border-radius: 90px;

box-shadow: 5px 3px 5px #03040a;

}

p {

text-align: center;

}