automatic image slider in html css
automatic image slider in html css
xxxxxxxxxx<style> * { padding: 0; margin: 0; box-sizing: border-box; } .box { display: flex; align-items: flex-start; background: #fff; height: 100vh; overflow: hidden; position: relative; } .box .single-box img { position: absolute; min-width: 100%; min-height: 100%; height: auto; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; transform: scale(1.5) rotate(15deg); -webkit-animation: animate 32s infinite; animation: animate 32s infinite; } .box .single-box:nth-child(3) img { -webkit-animation-delay: 8s; animation-delay: 8s; } .box .single-box:nth-child(2) img { -webkit-animation-delay: 16s; animation-delay: 16s; } .box .single-box:nth-child(1) img { -webkit-animation-delay: 24s; animation-delay: 24s; } @keyframes animate { 25% { opacity: 1; transform: scale(1) rotate(0); } 40% { opacity: 0; } } </style><body> <div class="wrapper box"> <div class="single-box"><img alt="" src="1.jpg"></div> <div class="single-box"><img alt="" src="2.jpg"></div> <div class="single-box"><img alt="" src="3.jpg"></div> <div class="single-box"><img alt="" src="4.jpg"></div> </div> </body>Source: www.codingflicks.com
Twitter 
LinkedIn