日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

    
    
    
    
    


    零一

看一下具體的效果：

小試牛刀

正方形本來(lái)是紅色背景的，當(dāng)我們鼠標(biāo)移入后，背景顏色變?yōu)榫G色，且不會(huì)再變回去。如果是普通的交互，我們應(yīng)該只用到了 ??:hover??，鼠標(biāo)移出后，元素會(huì)恢復(fù)原來(lái)的顏色，而我們現(xiàn)在是如何做到的呢？

這是因?yàn)槲覀儼?nbsp;"鼠標(biāo)移入方框" 這個(gè)動(dòng)作存儲(chǔ)下來(lái)了！這就是 "CSS狀態(tài)管理" 我們一起來(lái)解讀這段代碼吧！

CSS變量

來(lái)看一個(gè)CSS變量的例子

html {
  --state1: initial;
  --state2: ;
}

.zero2one {
  --color1: var(--state1) red; 
  --color2: var(--state2) blue;  
  
  color: var(--color1, yellow);   /* 最終字體顏色為yellow */
  background: var(--color2, pink); /* 最終背景色為blue */
}

其實(shí)這就是借助了 ??var()?? 函數(shù)第一個(gè)值無(wú)效時(shí)會(huì)用第二、第三個(gè)值、第n個(gè)值作為備選值的特性（如上述代碼所示）

然后還有一個(gè)騷操作就是 ??color: var(--color1, yellow)?? 最終會(huì)展示黃色，因?yàn)樽兞?nbsp;??--color1?? 引用了另一個(gè)變量 ??--state1: initial?? ，正是因?yàn)橹禐?nbsp;??initial?? ，導(dǎo)致最終 ??color?? 展示了黃色，??--color1?? 被認(rèn)定為一個(gè)無(wú)效值

這時(shí)有人要說(shuō)了，那我直接設(shè)置 ??--color1: initial red;?? 不就好了，為啥還要多引一個(gè)變量呢？我試過(guò)了，這樣直接寫(xiě)是沒(méi)用的，別問(wèn)，問(wèn)就是我也不知道?。ㄓ兄赖男』锇榭梢栽u(píng)論區(qū)告訴我~）

然后變量 ??--color2?? 引用了變量 ??--state2: ;??，因?yàn)槠渲禐榭?，所以其?shí)變量 ??--color2?? 對(duì)應(yīng)的也就是 ??blue?? ，那么 ??var(--color2, pink)?? 自然也是展示藍(lán)色了

變量切換

借助剛剛了解的CSS變量的特性，我們可以讓某個(gè)變量切換其值即可實(shí)現(xiàn)CSS的狀態(tài)切換，如何不借助 JS 實(shí)現(xiàn)對(duì)CSS變量的切換呢？這時(shí)候就要借助我們文章開(kāi)頭提到的 ??animation?? 了

先定義一個(gè) ??keyframes??

@keyframes statement {
  0% {
    --state: initial;
  }

  1%, 100% {
    --state: ;
  }
}

在初始狀態(tài)時(shí)將變量 ??--state?? 的值定義為 ??initial??，非初始狀態(tài)將變量 ??--state?? 的值定義為空

好像還是沒(méi)有講到如何切換。此時(shí)可以借助一個(gè)CSS屬性 ??animation-play-state?? ，其控制了元素動(dòng)畫(huà)的運(yùn)動(dòng)狀態(tài)，假設(shè)我們一開(kāi)始給某個(gè)元素設(shè)置的運(yùn)動(dòng)狀態(tài)為 ??paused??

.zero2one {
  animation: statement 1ms linear 1 forwards paused;
}

一開(kāi)始該元素就是暫停狀態(tài)，所以根據(jù)我們定義的 ??keyframes?? 的初始狀態(tài)來(lái)看，此時(shí)全局有一個(gè)變量 ??--state??，值為 ??initial??

然后可以在用戶(hù)進(jìn)行某些操作（??:hover??、??:active??等等）后，將該元素運(yùn)動(dòng)狀態(tài)改為 ??running??

.zero2one:hover {
  animation-play-state: running;
}

當(dāng)將元素的動(dòng)畫(huà)狀態(tài)設(shè)為 ??running?? 后，其動(dòng)畫(huà)已經(jīng)不是初始狀態(tài)了，并且因?yàn)槲覀冊(cè)O(shè)置了 ??forwards?? ，所以此時(shí)全局有一個(gè)變量 ??--state??，其值為空

這樣就做到了變量的動(dòng)態(tài)切換

將上述兩個(gè)技巧組合在一起，就實(shí)現(xiàn)了簡(jiǎn)易版的"CSS狀態(tài)管理"

實(shí)戰(zhàn)應(yīng)用

由此還引申出了一個(gè)比較有意思的東西，那就是CSS實(shí)現(xiàn)畫(huà)板！相信你們?cè)矶级?，那就直接放代碼吧~

最終實(shí)現(xiàn)效果就是這樣的，如下圖所示：

CSS畫(huà)板

CSS真好玩！ 希望本文講解的思路對(duì)大家有所幫助。