第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

CSS3做的6個動畫卡掉瀏覽器。

CSS3做的6個動畫卡掉瀏覽器。

一只廢喵 2017-07-16 19:45:11
我一個頁面寫了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;
}
查看完整回答
1 反對 回復 2017-07-17
?
wuili47

TA貢獻2條經驗 獲得超2個贊

沒貼代碼 怎么幫你。

查看完整回答
1 反對 回復 2017-07-17
?
一只廢喵

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>


查看完整回答
反對 回復 2017-07-17
?
披黑風的貓

TA貢獻53條經驗 獲得超40個贊

現在問問題的一句話就結束了,別人怎么知道你寫的什么,怎么幫助你?

查看完整回答
反對 回復 2017-07-17
?
__innocence

TA貢獻313條經驗 獲得超208個贊

不要根據你寫的代碼來評判css3,說不定你寫了死循環(huán)呢

查看完整回答
反對 回復 2017-07-16
  • 一只廢喵
    一只廢喵
    瀏覽器崩潰的圖已經帖好了，代碼也貼了，我不知道css3的代碼還會死循環(huán)。求解，CSS3怎么死循環(huán)。
?
錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢

TA貢獻2條經驗 獲得超0個贊

不知道，你把代碼打出來讓我們來試試

查看完整回答
反對 回復 2017-07-16
  • 4 回答
  • 0 關注
  • 5592 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號