Source Code:
(back to article)
Submit
Result:
Report an issue
<!Doctype html> <html> <head> <title>Слайдер изображений</title> <style> body { margin:10px auto; text-align:center; } .content { max-width:800px; text-align:left; margin:auto; } .simple-ss { width:800px; height:250px; background-color: #eeeeee; margin:auto; background-image:url("https://imgur.com/download/OtK7XDW"); animation-name: slide; animation-duration: 10s; animation-direction: normal; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes slide { 0% {background-position:0 0;} 16.66% {background-position:0 0;} 33.32% {background-position:-800px 0;} 49.98% {background-position:-800px 0;} 66.64% {background-position:-1600px 0;} 83.30% {background-position:-1600px 0;} 100% {background-position:0 0;} } </style> </head> <body> <div class="simple-ss"></div> <div class="content"> <p>Слайд-шоу без использования Javascript. Он не имеет страниц, кнопок и т. д.</p> </div> </body> </html>