我一個(gè)頁(yè)面寫(xiě)了6個(gè)CSS3動(dòng)畫(huà)，但是瀏覽器會(huì)卡死，為什么？我電腦只能打開(kāi)2個(gè)動(dòng)畫(huà)，開(kāi)3個(gè)就會(huì)卡，css3這么吃?xún)?nèi)存嗎？該怎么解決
4 回答
一只廢喵
TA貢獻(xiàn)8條經(jīng)驗(yàn) 獲得超4個(gè)贊
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;
}
慕的地6079101
TA貢獻(xiàn)3593條經(jīng)驗(yàn) 獲得超1個(gè)贊
一只廢喵
TA貢獻(xiàn)8條經(jīng)驗(yàn) 獲得超4個(gè)贊
<!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橫滑動(dòng)畫(huà)</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure?class="test2"> <img?src="../img/css3test.jpg"/> <figcaption> <h2>CSS3旋轉(zhuǎn)動(dòng)畫(huà)</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <div></div> </figcaption> </figure> <figure?class="test3"> <img?src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜切動(dòng)畫(huà)</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure?class="test4"> <img?src="../img/css3test.jpg"/> <figcaption> <h2>CSS3縮放動(dòng)畫(huà)</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> <div></div> </figcaption> </figure> <figure??class="test5"> <img?src="../img/css3test.jpg"/> <figcaption> <h2>CSS3漸顯動(dòng)畫(huà)</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> </figcaption> </figure> <figure??class="test6"> <img?src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜插動(dòng)畫(huà)</h2> <div></div> </figcaption> </figure> </body> </html>
披黑風(fēng)的貓
TA貢獻(xiàn)53條經(jīng)驗(yàn) 獲得超40個(gè)贊
現(xiàn)在問(wèn)問(wèn)題的一句話(huà)就結(jié)束了,別人怎么知道你寫(xiě)的什么,怎么幫助你?
-
一只廢喵謝謝，HTML CSS代碼已經(jīng)貼出來(lái)了。
__innocence
TA貢獻(xiàn)313條經(jīng)驗(yàn) 獲得超208個(gè)贊
不要根據(jù)你寫(xiě)的代碼來(lái)評(píng)判css3,說(shuō)不定你寫(xiě)了死循環(huán)呢
-
一只廢喵瀏覽器崩潰的圖已經(jīng)帖好了，代碼也貼了，我不知道css3的代碼還會(huì)死循環(huán)。求解，CSS3怎么死循環(huán)。
錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)錢(qián)
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊
不知道，你把代碼打出來(lái)讓我們來(lái)試試
-
一只廢喵謝謝，HTML CSS代碼已經(jīng)貼出來(lái)了。
- 4 回答
- 0 關(guān)注
- 5665 瀏覽
添加回答
舉報(bào)
0/150
提交
取消