Line 228: | Line 228: | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
+ | |||
+ | slider { | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background-color:#1f1f1f; | ||
+ | overflow:hidden; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | slider > * { | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background:#1f1f1f; | ||
+ | animation: slide 12s infinite; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(1){ | ||
+ | left:0%; | ||
+ | animation-delay: -1s; | ||
+ | background-image: url("https://i.pinimg.com/originals/fc/37/f9/fc37f9b7711cf1f5da4953657067c17d.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(2){ | ||
+ | left:0%; | ||
+ | animation-delay: 2s; | ||
+ | background-image: url("https://i.pinimg.com/originals/64/7c/ad/647cad975f25bcbeafbd555d3a410730.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(3){ | ||
+ | animation-delay: 5s; | ||
+ | background-image: url("https://easylife-online.com/wp-content/uploads/data/2018/1/10/best-cool-scenery-nature-best-hd-wallpaper-PIC-WSW2094197.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(4){ | ||
+ | left:0%; | ||
+ | animation-delay: 8s; | ||
+ | background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSaGlQQUA9Fnsxymdw7dknUxYLkVjUa4_LE0niwwc0TlyNZJiP"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | } | ||
+ | |||
+ | slide p { | ||
+ | font-family:Comfortaa; | ||
+ | font-size:70px; | ||
+ | text-align:center; | ||
+ | display:inline-block; | ||
+ | width:100%; | ||
+ | margin-top:340px; | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | @keyframes slide { | ||
+ | 0% {left: 100%; width:100%;} | ||
+ | 5% {left: 0%; } | ||
+ | 25% {left: 0%;} | ||
+ | 30%{left :-100%; width:100%;} | ||
+ | 30.001%{left:-100%; width:0%;} | ||
+ | 100% {left:100%; width:0%;} | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 23:34, 13 October 2018