HTML5CSS3的图片渐变。只能渐变第一张。第二张图片直接变没了。求大神告诉！
HTML5CSS3的图片渐变。只能渐变第一张。第二张图片直接变没了。求大神告诉！<!doctypehtml><htmllang="en"><head><metachars...
HTML5CSS3的图片渐变。只能渐变第一张。第二张图片直接变没了。求大神告诉！<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{padding:0;margin:0:}
body{background:#000;overflow:hidden;}
ul{width:100%;height:100%;position:fixed;top:0;left:0; }
ul li{list-style:none;width:100%;height:100%;position:absolute;top:0;left:0;animation:movies 20s linear infinite}
.ul li img{width:100%;height:100%;}
.ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
.ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
ul li:nth-child(3){animation-dalay:6s;-moz-animation-delay:6s;}
ul li:nth-child(4){animation-dalay:9s;-moz-animation-delay:9s;}
ul li:nth-child(5){animation-dalay:12s;-moz-animation-delay:12s;}
ul li:nth-child(6){animation-dalay:15s;-moz-animation-delay:15s;}
@keyframes movies{0%{opacity:0}8%{opacity:1}17%{opacity:1}27%{opacity:0}100%{opacity:0}}
</style>
<body>
<ul>
<li><img src="1.jpeg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpeg"></li>
<li><img src="6.jpg"></li>
</ul>
</body>
</html> 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
*{padding:0;margin:0:}
body{background:#000;overflow:hidden;}
ul{width:100%;height:100%;position:fixed;top:0;left:0; }
ul li{list-style:none;width:100%;height:100%;position:absolute;top:0;left:0;animation:movies 20s linear infinite}
.ul li img{width:100%;height:100%;}
.ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
.ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
ul li:nth-child(3){animation-dalay:6s;-moz-animation-delay:6s;}
ul li:nth-child(4){animation-dalay:9s;-moz-animation-delay:9s;}
ul li:nth-child(5){animation-dalay:12s;-moz-animation-delay:12s;}
ul li:nth-child(6){animation-dalay:15s;-moz-animation-delay:15s;}
@keyframes movies{0%{opacity:0}8%{opacity:1}17%{opacity:1}27%{opacity:0}100%{opacity:0}}
</style>
<body>
<ul>
<li><img src="1.jpeg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpeg"></li>
<li><img src="6.jpg"></li>
</ul>
</body>
</html> 展开
1个回答
展开全部
.ul li img{width:100%;height:100%;}
.ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
.ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
改成
ul li img{width:100%;height:100%;}
ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
.ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
.ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
改成
ul li img{width:100%;height:100%;}
ul li:nth-child(1){animation-dalay:0s;-moz-animation-delay:0s;}
ul li:nth-child(2){animation-dalay:3s;-moz-animation-delay:3s;}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
