我一个页面写了6个CSS3动画，但是浏览器会卡死，为什么？我电脑只能打开2个动画，开3个就会卡，css3这么吃内存吗？该怎么解决
4 回答
一只废喵
TA贡献8条经验 获得超4个赞
figure{
width: 33.33%;
height: 350px;
position:relative;
overflow: hidden;
float: left;
}
figcaption{
width: 100%;
height: 100%;
color: #FFFCE7;
position: absolute;
top: 0;
left: 0;
}
figure p{
margin-top: 10px;
line-height: 30px;
width: 150px;
text-align: center;
}
figure h2,p,img,div,img{
transition: all 0.5s;
}
figure img{
opacity: 0.8;
}
.test1 figcaption{
padding: 20px;
}
.test1 figcaption p{
transform: translateX(-250px);
background: rgba(0,0,0,0.5);
text-align: center;
margin-top: 10%;
margin-left: 10%;
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.05s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay:0.1s;
}
.test1:hover figcaption p{
transform: translateX(0px);
}
.test1:hover img{
transform: translateX(-50px);
opacity: 0.5;
}
.test1{
background: #2f0000;
}
.test2 figcaption h2,p{
margin-top: 10%;
margin-left: 10%;
}
.test2 figcaption > div{
width: 80%;
height: 80%;
border: 1px solid #FFF;
position: absolute;
top: 10%;
left: 10%;
transform: translate(-150px,-350px) rotate(0deg);
}
.test2 figcaption p{
transform: translateX(-350px) rotate(0deg);
}
.test2:hover figcaption div{
transform: translate(0px,0px) rotate(180deg);
}
.test2:hover figcaption p{
transform: translate(0px,0px) rotate(360deg);
}
.test2:hover img{
transform: translateX(-100px);
opacity: 0.5;
}
.test3 figcaption{
top: 15%;
left: 20%;
}
.test3 figcaption p{
background: rgba(255,255,255,0.3);
transform: skew(90deg);
}
.test3:hover figcaption p{
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(1){
transition-delay:0.1s ;
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(2){
transition-delay:0.2s ;
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(3){
transition-delay:0.3s ;
transform: skew(0deg);
}
.test4 figcaption{
width: 100%;
height: 100%;
}
.test4 figcaption > div{
width: 80%;
height: 80%;
border: 1px solid #FFF;
position: absolute;
top: 10%;
left: 10%;
transform: scale(1.3,1.3);
opacity: 0;
}
.test4 figcaption h2{
margin-top: 15%;
margin-left: 15%;
}
.test4 figcaption p{
margin-left: 15%;
margin-top: 10px;
transform: translateY(40px);
opacity: 0;
}
.test4 img{
transform: scale(1,1);
}
.test4:hover img{
transform: scale(1.2,1.2);
opacity: 0.5;
}
.test4:hover figcaption div{
transform: scale(1,1);
opacity: 1;
}
.test4:hover figcaption p{
transform: translateY(0px);
opacity: 1;
}
.test5 figcaption{
width: 100%;
}
.test5 figcaption h2,p{
margin-top: 20%;
margin-left: 30%;
}
.test5 figcaption h2{
opacity: 0;
transform: translateY(-50px);
}
.test5 figcaption p{
opacity: 0;
transform: translateY(50px);
}
.test5:hover figcaption h2{
opacity: 1;
transform: translateY(0px);
}
.test5:hover figcaption p{
opacity: 1;
transform: translateY(0px);
}
.test6 figcaption h2{
margin-top: 50%;
margin-left: 20%;
opacity: 0;
}
.test6 figcaption div{
background: rgba(0,0,0,0.8);
width: 120%;
height: 100%;
transform-origin:0 0;
position: absolute;
bottom: -350px;
}
.test6:hover figcaption div{
transform: rotate(-15deg);
}
.test6:hover figcaption h2{
transform: translateY(-100px);
opacity: 1;
}
一只废喵
TA贡献8条经验 获得超4个赞
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/reset.css"/> <link rel="stylesheet" type="text/css" href="../css/CSS3donghua1.css"/> </head> <body> <figure class="test1"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3横滑动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure class="test2"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3旋转动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <div></div> </figcaption> </figure> <figure class="test3"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜切动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure class="test4"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3缩放动画</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> <div></div> </figcaption> </figure> <figure class="test5"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3渐显动画</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> </figcaption> </figure> <figure class="test6"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜插动画</h2> <div></div> </figcaption> </figure> </body> </html>
- 4 回答
- 0 关注
- 5492 浏览
添加回答
举报
0/150
提交
取消