*{ margin: 0; padding: 0; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow: hidden; } div>img{ width: 100%; height: auto; position: absolute; z-index: 0; left: -100%; animation: out 1s; } ul{ position: absolute; top:560px; margin: 0 60px; z-index: 99; } li{ list-style: none; float: left; margin-right: 20px; } li:last-child{ margin: 0; } li a{ display: inline-block; background-color: #000; width: 120px; height: 102px; } li a img{ opacity: 0.8; width: 100%; height:auto; } li a img:hover{ opacity: 1; } div img:target{ left: 0; z-index: 10; } @keyframes sport1{ 0%{left: 500px;} 100%{left: 0;} } @keyframes sport2{ 0%{top:350px} 100%{top: 0;} } @keyframes sport3{ 0%{transform: scale(0.1,0.1);} 100%{transform: scale(1,1);} } @keyframes sport4{ 0%{transform: scale(2,2);} 100%{transform: scale(1,1);} } @keyframes sport5{ 0%{transform: scale(0.1,0.1) rotate(-360deg);} 100%{transform: scale(1,1) rotate(0deg);} } @keyframes out{ 0%{left:0;} 100%{left:0;} } #img1:target{ animation: sport1 0.5s; animation-timing-function:ease-out; } #img2:target{ animation: sport2 0.5s; animation-timing-function:ease-out; } #img3:target{ animation: sport3 1s; animation-timing-function:ease-in; } #img4:target{ animation: sport4 1s; animation-timing-function:ease-out; } #img5:target{ animation: sport5 0.7s; animation-timing-function:ease-in-out; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS animation 制作一个 Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <img src="600x600bb.jpg" alt="img1" id="img1"> <img src="600x600bb (2).jpg" alt="img2" id="img2"> <img src="600x600bb (5).jpg" alt="img3" id="img3"> <img src="600x600bb (7).jpg" alt="img4" id="img4"> <img src="600x600bb (8).jpg" alt="img5" id="img5"> <ul> <li><a href="#img1"><img src="600x600bb.jpg" alt="img1"></a></li> <li><a href="#img2"><img src="600x600bb (2).jpg" alt="img2"></a></li> <li><a href="#img3"><img src="600x600bb (5).jpg" alt="img3"></a></li> <li><a href="#img4"><img src="600x600bb (7).jpg" alt="img4"></a></li> <li><a href="#img5"><img src="600x600bb (8).jpg" alt="img5"></a></li> </ul> </div> </body> </html>
①relative不脱离原文档流，这是和absolute最大的区别
②
三里屯柯南
https://www.cnblogs.com/xuyuntao/articles/6391728.html
③z-index和display
④CSS3 :target 选择器
定义和用法
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
⑤用:hover等伪类改变样式类似于添加样式
⑥animation-fill-mode：forwards
⑦animation 100%{left:0}无过程 100%{transform:rotate(-360deg)}有过程？？？
⑧overflow:hidden;