为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3做的6个动画卡掉浏览器。

/ 猿问

CSS3做的6个动画卡掉浏览器。

一只废喵 2017-07-16 19:45:11

我一个页面写了6个CSS3动画,但是浏览器会卡死,为什么?我电脑只能打开2个动画,开3个就会卡,css3这么吃内存吗?该怎么解决

查看完整描述

8 回答

已采纳
?
mengniu

无码无真相

查看完整回答
反对 回复 2017-07-17
点击展开后面1
?
一只废喵

//img.mukewang.com/596c38710001d56310020555.jpg浏览器崩溃的截图

查看完整回答
1 反对 回复 2017-07-17
?
一只废喵
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

没贴代码 怎么帮你。

查看完整回答
1 反对 回复 2017-07-17
?
一只废喵
<!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
?
披黑风的猫

现在问问题的一句话就结束了,别人怎么知道你写的什么,怎么帮助你?

查看完整回答
反对 回复 2017-07-17
?
__innocence

不要根据你写的代码来评判css3,说不定你写了死循环呢

查看完整回答
反对 回复 2017-07-16
  • 一只废喵
    一只废喵
    浏览器崩溃的图已经帖好了,代码也贴了,我不知道css3的代码还会死循环。求解,CSS3怎么死循环。
?
钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

不知道,你把代码打出来让我们来试试

查看完整回答
反对 回复 2017-07-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信