qartalonline
چهارشنبه 02 بهمن 1392, 10:02 صبح
اصلاح و تمیز شد.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<div class="slider">
<div class="bg1"></div>
<div class="lineraha"></div>
<div class="txtraha"></div>
</div>
</body>
</html>
کد css:.slider{
background-color: #ccc;
display: block;
width: 700px;
height: 286px;
position: relative;
margin: 0 auto;
margin-top: 150px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
.bg1{
background-image: url(img/bg1.jpg);
display: block;
width: 700px;
height: 286px;
position: absolute;
-webkit-animation: bg1 2s;
-moz-animation: bg1 2s;
-o-animation: bg1 2s;
animation: bg1 2s;
}
.lineraha{
background-image: url(img/line1.png);
display: block;
width: 700px;
height: 286px;
position: absolute;
-webkit-animation: lineraha 4s;
-moz-animation: lineraha 4s;
-o-animation: lineraha 4s;
animation: lineraha 4s;
}
.txtraha{
background-image: url(img/grd.png);
display: block;
width: 700px;
height: 286px;
position: absolute;
-webkit-animation: txtraha 8s;
-moz-animation: txtraha 8s;
-o-animation: txtraha 8s;
animation: txtraha 8s;
}
@-webkit-keyframes bg1 {
0% { top: -400px; }
100% { top: 0; }
}
@-moz-keyframes bg1 {
0% { top: -400px; }
100% { top: 0; }
}
@-o-keyframes bg1 {
0% { top: -400px; }
100% { top: 0; }
}
@keyframes bg1 {
0% { top: -400px; }
100% { top: 0; }
}
@-webkit-keyframes lineraha {
0% { right: -700px; }
50% { right: -700px; }
100% { right: 0; }
}
@-moz-keyframes lineraha {
0% { right: -700px; }
50% { right: -700px; }
100% { right: 0; }
}
@-o-keyframes lineraha {
0% { right: -700px; }
50% { right: -700px; }
100% { right: 0; }
}
@keyframes lineraha {
0% { right: -700px; }
50% { right: -700px; }
100% { right: 0; }
}
@-webkit-keyframes txtraha {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes txtraha {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes txtraha {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes txtraha {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}