18号，和要离开的室友研究轮播图，最后是成功只用css做出了轮播图，因为成功早早回去下了两盘棋，没写日记
19号，发烧。。。
20号，休息。。。
因此，本篇日记是21号记的。。感觉当时的那种无奈，紧迫，枯燥，喜悦已经被洗刷干净了。。不过还是记一下吧。
1.关于兄弟标签。。
我本来以为，选择器虽然是自学，但学的也已经差不多了，结果还是在选择器上出了问题，导致我代码写出来后，实现不了，卡了一小时检查代码，最后发现是选择器错误。。。。
关于 ~ 选择器，该选择器是只能选择该元素之后的同级元素，并不是同级都能选！是之后的！
2.transition属性
该属性是四个属性的简写，能实现一些简单的过渡动画效果，但并不如keyframes那样能详细控制具体哪一段的动画。
transition-delay 规定过渡开始的时间（比如从鼠标悬停开始到效果演出）
transition-duration 规定动画演出需要的时间，该值必须规定
transition-property 规定哪些属性执行该动画效果，比如设置width，就是宽度执行动画效果，而height等无关
transition-timing-function 规定过渡效果的速度曲线，也可以理解为过渡的方式，该属性有几个需要记住的值：
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
这里标注一下，这个属性可以直接用keyframes来实现，不过那个用起来稍微麻烦一点，而且我还不熟悉，所以暂时不用。
3.用css实现手动轮播图效果
又是一个研究了一天的东西，ok，先记一下大致大致思路。
首先规定号轮播图的播放区域，比如width1200，height500，overflow hidden
然后在轮播区域中放入一个盒子，在这里成为轮播盒子，假如我要让三个图片轮播，一个图片的宽度为1200，那么这个轮播盒子的宽度就设置为3600。
重点来了，现在如何实现轮播呢？这里我们使用input：checked~element（轮播盒子），来达成点击按钮指向盒子，然后动作为
{transition：linear 2s；left：0}
{transition：linear 2s；left：-1200px}
{transition：linear 2s；left：-2400px}
这里记录，当left，top，right，bottom单独使用的时候，为该属性定义了定位元素某外边距边界与其包含块某边界之间的偏移
比如left：-1200px。就是把图像的左边缘设置在其包含元素左边缘之上 -1200 像素的位置，也就是左移1200px，这样。就完成了滑动的效果。以下为今天试做的具体代码：
.main_transitionarea{
position: relative;
width: 1200px;
height: 500px;
overflow: hidden;
/* display: flex;
justify-content: flex-start; */
}
.main_transition{
position: relative;
width: 3600px;
overflow: hidden;
display: flex;
}
.main_transition1{
width: 1200px;
height: 500px;
background-color: red;
/* text-align: center; */
font-size: 30px;
/* display: none; */
}
.main_transition2{
width: 1200px;
height: 500px;
background-image: url(/image/lol-singer2.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 75%;
/* display: none; */
}
#pic1:checked ~ .main_transition{
left: 0;
transition: 2s linear;
}
#pic2:checked ~ .main_transition{
left: -1200px;
transition: 2s linear;
}
#pic3:checked ~ .main_transition{
left: -2400px;
transition: 2s linear;
}
/* 按钮位置 */
.main_transitionarea>input:nth-of-type(1){
position: absolute;
top: 470px;
left: 48%;
z-index: 1;
}
.main_transitionarea>input:nth-of-type(2){
position: absolute;
top: 470px;
left: 50%;
z-index: 1;
}
.main_transitionarea>input:nth-of-type(3){
position: absolute;
top: 470px;
left: 52%;
z-index: 1;
}
记录完毕，继续今天的js学习
