本文介绍了一种使用CSS实现的各种动画效果，包括图片缩放、文字显示动画等，并提供了详细的CSS样式代码供读者学习和参考。
* {
padding:0;
margin:0;
}
ul,li,ol {
list-style:none;
}
.animate ul li {
width:400px;
height:300px;
float:left;
margin:10px;
cursor:pointer;
position:relative;
overflow:hidden;
}
.animate ul li img {
width:100%;
height:100%;
transition:all 0.4s ease;
}
.text,.text4 {
width:100%;
height:100%;
text-align:center;
line-height:300px;
position:absolute;
background:rgba(0,0,0,0.2);
transition:all 0.4s ease;
color:#fff;
font-size:20px;
}
.text1 {
top:300px;
left:0;
}
.text2 {
top:300px;
left:400px;
}
.text3 {
top:-300px;
left:0;
}
.animate ul .box:hover .text {
top:0;
left:0;
}
.text4 {
top:0;
left:0;
opacity:0;
}
.text4 p {
width:100%;
height:100%;
transition:all 0.4s ease;
}
.animate ul .imgSc:hover img {
transform:scale(1.2);
}
.box4:hover .text4 {
background:rgba(0,0,0,0.2);
opacity:1;
}
.box4:hover .text4 p {
border:2px solid #000000;
transform:scale(0.8);
background:rgba(255,255,255,0.1);
}
.left,.right {
position:absolute;
top:0;
width:50%;
height:100%;
background:rgba(0,0,0,0.2);
transition:all 0.3s ease;
}
.box5 p {
width:100%;
color:#fff;
height:20px;
position:absolute;
top:-20px;
left:0;
transition:all 0.3s ease;
text-align:center;
}
.box5:hover p {
top:140px;
}
.left {
left:-50%;
}
.right {
right:-50%;
}
li:hover .left {
left:0;
}
li:hover .right {
right:0;
}
.box7 div {
position:absolute;
top:0;
left:0;
width:99%;
height:99%;
transition:all 0.5s;
transform:rotateX(90deg) rotateY(90deg);
background:rgba(0,0,0,.2);
color:#fff;
text-align:center;
line-height:300px;
}
.box7:hover div {
transform:rotateX(0deg);
}
.box8 {
transform-style:preserve-3d;
perspective:500px;
}
.box8:hover .img2 {
transform:rotateY(180deg);
opacity:0;
}
.img1 {
opacity:0;
}
.box8:hover .img1 {
transform:rotateY(0deg);
opacity:1;
}
img {
position:absolute;
top:0;
left:0;
}
.img1 {
transform:rotateY(180deg);
}
.box6 p {
width:100%;
position:absolute;
top:0;
left:0;
color:#fff;
text-align:center;
transition:all 0.5s;
transform:translateY(-20px);
}
.box6:hover p {
transform:translateY(140px);
}
.ani1 {
position:absolute;
top:0;
left:0;
width:500px;
height:300px;
background:rgba(0,0,0,0.2);
transform:rotate(37deg) translate(0px,240px);
transform-origin:left top;
transition:all 0.5s;
}
.ani2 {
position:absolute;
top:0;
width:500px;
height:300px;
background:rgba(0,0,0,0.2);
transform:rotate(37deg) translate(100px,-240px);
transform-origin:right top;
transition:all 0.5s;
}
.box6:hover .ani1 {
transform:rotate(37deg) translate(0px,0px);
}
.box6:hover .ani2 {
transform:rotate(37deg) translate(100px,0px);
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
