如下css3代码如何变成3张以上的图片轮转？
@-webkit-keyframesfadeInOut{0%{opacity:1;}25%{opacity:0;}50%{opacity:0;}75%{opacity:1...
@-webkit-keyframes fadeInOut {
0% {
opacity:1;
}
25% {
opacity:0;
}
50% {
opacity: 0;
}
75% {
opacity:1;
}
}
.anim_fade_image {
position:absolute;
-webkit-animation-name: fadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-animation-direction: alternate;
}
HTML代码： 展开
0% {
opacity:1;
}
25% {
opacity:0;
}
50% {
opacity: 0;
}
75% {
opacity:1;
}
}
.anim_fade_image {
position:absolute;
-webkit-animation-name: fadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-animation-direction: alternate;
}
HTML代码： 展开
2个回答
展开全部
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
代码如下：可以复制运行下试试：
<html>
<head>
<style>
body {
background:#ddd;
}
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="keleyi"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用animation-delay属性，给第二张和第三张图片加相应的animation-delay值
<div>
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/2_07.jpg" class="anim_fade_image" width="800" height="300">
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/1_07.jpg" class="anim_fade_image" width="800" height="300" style="-webkit-animation-delay:3s;">
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/4_07.jpg" class="anim_fade_image" width="800" height="300" style="-webkit-animation-delay:6s;">
</div>
<div>
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/2_07.jpg" class="anim_fade_image" width="800" height="300">
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/1_07.jpg" class="anim_fade_image" width="800" height="300" style="-webkit-animation-delay:3s;">
<img src="http://www.cjolimg.com/v7/jobs/jobtemplates/73398/cn/images/4_07.jpg" class="anim_fade_image" width="800" height="300" style="-webkit-animation-delay:6s;">
</div>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
