animationを初めて使って感動した
ページ↓ GitHub
https://kngy0306.github.io/SlideSample/
<body><divclass="slider"></div></body>*{padding:0;margin:0;background:#34495e;}.slider{width:800px;height:550px;background:url(1.jpg);margin:50pxauto;animation:slide15sinfinite;}@keyframesslide{25%{background:url(2.jpg);}50%{background:url(3.jpg);}75%{background:url(4.jpg);}100%{background:url(1.jpg);}}使用した画像 (Unsplashより)
1.jpg
https://images.unsplash.com/photo-1522383225653-ed111181a951?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80
Photo by AJ on Unsplash
2.jpg
https://images.unsplash.com/photo-1570896168675-7338d1e857cb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
Photo by Mateus Elias Reis on Unsplash
3.jpg
https://images.unsplash.com/photo-1506202687253-52e1b29d3527?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
Photo by Timothy Eberly on Unsplash
4.jpg
https://images.unsplash.com/photo-1543802700-8a647cc92bd4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80
Photo by Aleksandra Rupar on Unsplash
CSSだけでもできることたくさんあってまだまだ驚くばかり