CSS3图片翻转和轮播特性

28. December 2015 HTML5 0

@charset “utf-8″;
#content{
width:100%;
height:1450px;
background-color:#6FF;
background-image:url(../images/ground.jpg);
background-attachment:fixed;
background-size:100% 100%;
background-repeat:no-repeat;
}
.pic{
width:30%;
height:280px;
background-color:#F00;
margin-left:13%;
margin-top:20px;
float:left;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-ms-transition-duration:2s;
transition-duration:2s;
}
.pic:hover{
-webkit-transform: rotateY(180deg);
-webkit-transition-duration:2s;
-moz-transform: rotateY(180deg);
-moz-transition-duration:2s;
-ms-transform: rotateY(180deg);
-ms-transition-duration:2s;
transform: rotateY(180deg);
transition-duration:2s;
}
#picss{
width:800px;
height:600px;
background-color:#03C;
margin:0 auto;
position:absolute;
top:750px;
left:50%;
margin-left:-400px;
-webkit-animation: myfirst 5s ease-in-out 0s infinite alternate;
-moz-animation: myfirst 5s ease-in-out 0s infinite alternate;
-ms-animation: myfirst 5s ease-in-out 0s infinite alternate;
animation: myfirst 5s ease-in-out 0s infinite alternate;
}

@keyframes myfirst
{
0% {background:url(../images/s1.jpg); background-size:100% 100%;}
25% {background:url(../images/s2.jpg); background-size:100% 100%;}
50% {background:url(../images/s3.jpg); background-size:100% 100%;}
75% {background:url(../images/s4.jpeg); background-size:100% 100%;}
100% {background:url(../images/s5.jpg); background-size:100% 100%;}
}

@-moz-keyframes myfirst
{
0% {background:url(../images/s1.jpg); background-size:100% 100%;}
25% {background:url(../images/s2.jpg); background-size:100% 100%;}
50% {background:url(../images/s3.jpg); background-size:100% 100%;}
75% {background:url(../images/s4.jpeg); background-size:100% 100%;}
100% {background:url(../images/s5.jpg); background-size:100% 100%;}
}
@-webkit-keyframes myfirst
{
0% {background:url(../images/s1.jpg); background-size:100% 100%;}
25% {background:url(../images/s2.jpg); background-size:100% 100%;}
50% {background:url(../images/s3.jpg); background-size:100% 100%;}
75% {background:url(../images/s4.jpeg); background-size:100% 100%;}
100% {background:url(../images/s5.jpg); background-size:100% 100%;}
}
@-ms-keyframes myfirst
{
0% {background:url(../images/s1.jpg); background-size:100% 100%;}
25% {background:url(../images/s2.jpg); background-size:100% 100%;}
50% {background:url(../images/s3.jpg); background-size:100% 100%;}
75% {background:url(../images/s4.jpeg); background-size:100% 100%;}
100% {background:url(../images/s5.jpg); background-size:100% 100%;}
}

--------------------------------

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Picture Show</title>
<link href=”css/picture.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”content”>
<div class=”pic”><img src=”images/1.jpg” width=”100%” height=”100%”></div>
<div class=”pic”><img src=”images/2.jpg” width=”100%” height=”100%”></div>
<div class=”pic”><img src=”images/3.jpeg” width=”100%” height=”100%”></div>
<div class=”pic”><img src=”images/4.jpeg” width=”100%” height=”100%”></div>
<div id=”picss”></div>
<div id=”return”><a href=”index.html”><img src=”images/return.png” width=”100px;”></a></div>
</div>
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *