18號(hào)，和要離開的室友研究輪播圖，最后是成功只用css做出了輪播圖，因?yàn)槌晒υ缭缁厝ハ铝藘杀P棋，沒寫日記
19號(hào)，發(fā)燒。。。
20號(hào)，休息。。。
因此，本篇日記是21號(hào)記的。。感覺當(dāng)時(shí)的那種無奈，緊迫，枯燥，喜悅已經(jīng)被洗刷干凈了。。不過還是記一下吧。
1.關(guān)于兄弟標(biāo)簽。。
我本來以為，選擇器雖然是自學(xué)，但學(xué)的也已經(jīng)差不多了，結(jié)果還是在選擇器上出了問題，導(dǎo)致我代碼寫出來后，實(shí)現(xiàn)不了，卡了一小時(shí)檢查代碼，最后發(fā)現(xiàn)是選擇器錯(cuò)誤。。。。
關(guān)于 ~ 選擇器，該選擇器是只能選擇該元素之后的同級(jí)元素，并不是同級(jí)都能選！是之后的！
2.transition屬性
該屬性是四個(gè)屬性的簡寫，能實(shí)現(xiàn)一些簡單的過渡動(dòng)畫效果，但并不如keyframes那樣能詳細(xì)控制具體哪一段的動(dòng)畫。
transition-delay 規(guī)定過渡開始的時(shí)間（比如從鼠標(biāo)懸停開始到效果演出）
transition-duration 規(guī)定動(dòng)畫演出需要的時(shí)間，該值必須規(guī)定
transition-property 規(guī)定哪些屬性執(zhí)行該動(dòng)畫效果，比如設(shè)置width，就是寬度執(zhí)行動(dòng)畫效果，而height等無關(guān)
transition-timing-function 規(guī)定過渡效果的速度曲線，也可以理解為過渡的方式，該屬性有幾個(gè)需要記住的值：
linear規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。
這里標(biāo)注一下，這個(gè)屬性可以直接用keyframes來實(shí)現(xiàn)，不過那個(gè)用起來稍微麻煩一點(diǎn)，而且我還不熟悉，所以暫時(shí)不用。
3.用css實(shí)現(xiàn)手動(dòng)輪播圖效果
又是一個(gè)研究了一天的東西，ok，先記一下大致大致思路。
首先規(guī)定號(hào)輪播圖的播放區(qū)域，比如width1200，height500，overflow hidden
然后在輪播區(qū)域中放入一個(gè)盒子，在這里成為輪播盒子，假如我要讓三個(gè)圖片輪播，一個(gè)圖片的寬度為1200，那么這個(gè)輪播盒子的寬度就設(shè)置為3600。
重點(diǎn)來了，現(xiàn)在如何實(shí)現(xiàn)輪播呢？這里我們使用input：checked~element（輪播盒子），來達(dá)成點(diǎn)擊按鈕指向盒子，然后動(dòng)作為
{transition：linear 2s；left：0}
{transition：linear 2s；left：-1200px}
{transition：linear 2s；left：-2400px}
這里記錄，當(dāng)left，top，right，bottom單獨(dú)使用的時(shí)候，為該屬性定義了定位元素某外邊距邊界與其包含塊某邊界之間的偏移
比如left：-1200px。就是把圖像的左邊緣設(shè)置在其包含元素左邊緣之上 -1200 像素的位置，也就是左移1200px，這樣。就完成了滑動(dòng)的效果。以下為今天試做的具體代碼：
.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;
}
記錄完畢，繼續(xù)今天的js學(xué)習(xí)
