|
|
| (No se muestran 5 ediciones intermedias del mismo usuario) |
| Línea 1: |
Línea 1: |
| #slider{
| | h1 { |
| width:600px;
| | padding: 0.2em 0.4em; |
| height:250px;
| | border: 5px blue; |
| position:relative;
| | -moz-border-radius:5px;-webkit-border-radius:5px; |
| overflow:hidden;
| | margin:0 0 10px 0; |
| }
| | border:2px solid #000; |
| @keyframes load{
| | background: #006cb0; color:white; |
| from{left:-100%;}
| | font-size:140%; |
| to{left:0;}
| | font-weight:bold; |
| }
| | text-align:center; |
| .slides{ | |
| width:400%;
| |
| height:100%;
| |
| position:relative;
| |
| -webkit-animation:slide 30s infinite;
| |
| -moz-animation:slide 30s infinite;
| |
| animation:slide 30s infinite;
| |
| }
| |
| .slider{
| |
| width:25%;
| |
| height:100%;
| |
| float:left;
| |
| position:relative;
| |
| z-index:1;
| |
| overflow:hidden;
| |
| }
| |
| .slide img{
| |
| width:100%;
| |
| height:100%;
| |
| }
| |
| .slide img{
| |
| width:100%;
| |
| height:100%;
| |
| }
| |
| .image{
| |
| width:100%;
| |
| height:100%;
| |
| }
| |
| .image img{
| |
| width:100%;
| |
| height:100%;
| |
| }
| |
| | |
| /* Legend */
| |
| .legend{
| |
| border:500px solid transparent;
| |
| border-left:600px solid rgba(52, 73, 94, .7);
| |
| border-bottom:0;
| |
| position:absolute;
| |
| bottom:0;
| |
| }
| |
| | |
| /* Contents */
| |
| .content{
| |
| width:100%;
| |
| height:100%;
| |
| position:absolute;
| |
| overflow:hidden;
| |
| }
| |
| .content-txt{
| |
| width:400px;
| |
| height:150px;
| |
| float:left;
| |
| position:relative;
| |
| top:50px;
| |
| -webkit-animation:content-s 7.5s infinite;
| |
| -moz-animation:content-s 7.5s infinite;
| |
| animation:content-s 7.5s infinite;
| |
| }
| |
| .content-txt h1{
| |
| font-family:Intro;
| |
| font-size:24px;
| |
| color:#fff;
| |
| text-align:left;
| |
| margin-left:30px;
| |
| padding-bottom:10px;
| |
| }
| |
| .content-txt h2{
| |
| font-family:Quicksand;
| |
| font-weight:normal;
| |
| font-size:14px;
| |
| font-style:italic;
| |
| color:#fff;
| |
| text-align:left;
| |
| margin-left:30px;
| |
| } | | } |
|
| |
|
| /* Switch */
| | h2{ |
| .switch{
| | font-family: sans-serif; |
| width:120px;
| | margin: 100px auto; |
| height:10px;
| | text-align: center; |
| position:absolute;
| | font-size: 40px; |
| bottom:50px;
| | max-width: 600px; |
| z-index:99;
| | position:relative; |
| left:30px;
| |
| }
| |
| .switch > ul{
| |
| list-style:none;
| |
| } | | } |
| .switch > ul > li{
| | h2:before{ |
| width:10px;
| | content: ""; |
| height:10px;
| | display:block; |
| border-radius:50%;
| | width: 120px; |
| background:#333;
| | height:2px; |
| float:left;
| | background: #000; |
| margin-right:5px;
| | position: absolute; |
| cursor:pointer;
| | left: 0; |
| | top: 50%; |
| | z-index: -2; |
| } | | } |
| .switch ul{
| | h2:after{ |
| overflow:hidden;
| | content: ""; |
| | display:block; |
| | width: 120px; |
| | height:2px; |
| | background: #000; |
| | position: absolute; |
| | right: 0; |
| | top: 50%; |
| | z-index: -2; |
| } | | } |
| .on{
| |
| width:100%;
| |
| height:100%;
| |
| border-radius:50%;
| |
| background:#f39c12;
| |
| position:relative;
| |
| -webkit-animation:on 30s infinite;
| |
| -moz-animation:on 30s infinite;
| |
| animation:on 30s infinite;
| |
| }
| |
|
| |
| /* Animation */
| |
| @-webkit-keyframes slide{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:-100%;
| |
| }
| |
| 46%{
| |
| margin-left:-100%;
| |
| }
| |
| 50%{
| |
| margin-left:-200%;
| |
| }
| |
| 71%{
| |
| margin-left:-200%;
| |
| }
| |
| 75%{
| |
| margin-left:-300%;
| |
| }
| |
| 96%{
| |
| margin-left:-300%;
| |
| }
| |
| }
| |
| @-moz-keyframes slide{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:-100%;
| |
| }
| |
| 46%{
| |
| margin-left:-100%;
| |
| }
| |
| 50%{
| |
| margin-left:-200%;
| |
| }
| |
| 71%{
| |
| margin-left:-200%;
| |
| }
| |
| 75%{
| |
| margin-left:-300%;
| |
| }
| |
| 96%{
| |
| margin-left:-300%;
| |
| }
| |
| }
| |
| @keyframes slide{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:-100%;
| |
| }
| |
| 46%{
| |
| margin-left:-100%;
| |
| }
| |
| 50%{
| |
| margin-left:-200%;
| |
| }
| |
| 71%{
| |
| margin-left:-200%;
| |
| }
| |
| 75%{
| |
| margin-left:-300%;
| |
| }
| |
| 96%{
| |
| margin-left:-300%;
| |
| }
| |
| }
| |
|
| |
| @-webkit-keyframes content-s{
| |
| 0%{left:-420px;}
| |
| 10%{left:0px;}
| |
| 30%{left:0px;}
| |
| 40%{left:0px;}
| |
| 50%{left:0px;}
| |
| 60%{left:0px;}
| |
| 70%{left:0;}
| |
| 80%{left:-420px;}
| |
| 90%{left:-420px;}
| |
| 100%{left:-420px;}
| |
| }
| |
| @-moz-keyframes content-s{
| |
| 0%{left:-420px;}
| |
| 10%{left:0px;}
| |
| 30%{left:0px;}
| |
| 40%{left:0px;}
| |
| 50%{left:0px;}
| |
| 60%{left:0px;}
| |
| 70%{left:0;}
| |
| 80%{left:-420px;}
| |
| 90%{left:-420px;}
| |
| 100%{left:-420px;}
| |
| }
| |
| @keyframes content-s{
| |
| 0%{left:-420px;}
| |
| 10%{left:20px;}
| |
| 15%{left:0px;}
| |
| 30%{left:0px;}
| |
| 40%{left:0px;}
| |
| 50%{left:0px;}
| |
| 60%{left:0px;}
| |
| 70%{left:0;}
| |
| 80%{left:-420px;}
| |
| 90%{left:-420px;}
| |
| 100%{left:-420px;}
| |
| }
| |
|
| |
| @-webkit-keyframes on{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:15px;
| |
| }
| |
| 46%{
| |
| margin-left:15px;
| |
| }
| |
| 50%{
| |
| margin-left:30px;
| |
| }
| |
| 71%{
| |
| margin-left:30px;
| |
| }
| |
| 75%{
| |
| margin-left:45px;
| |
| }
| |
| 96%{
| |
| margin-left:45px;
| |
| }
| |
| }
| |
|
| |
| @-moz-keyframes on{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:15px;
| |
| }
| |
| 46%{
| |
| margin-left:15px;
| |
| }
| |
| 50%{
| |
| margin-left:30px;
| |
| }
| |
| 71%{
| |
| margin-left:30px;
| |
| }
| |
| 75%{
| |
| margin-left:45px;
| |
| }
| |
| 96%{
| |
| margin-left:45px;
| |
| }
| |
| }
| |
|
| |
| @keyframes on{
| |
| 0%,100%{
| |
| margin-left:0%;
| |
| }
| |
| 21%{
| |
| margin-left:0%;
| |
| }
| |
| 25%{
| |
| margin-left:15px;
| |
| }
| |
| 46%{
| |
| margin-left:15px;
| |
| }
| |
| 50%{
| |
| margin-left:30px;
| |
| }
| |
| 71%{
| |
| margin-left:30px;
| |
| }
| |
| 75%{
| |
| margin-left:45px;
| |
| }
| |
| 96%{
| |
| margin-left:45px;
| |
| }
| |
| }
| |
|
| |
| */
| |
