No.6

*{
    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最大的区别

②

浅谈CSS3中display属性的Flex布局

三里屯柯南

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;