小編給大家分享一下怎么用純CSS實現(xiàn)條紋錯覺的動畫效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)公司成都網站建設定制網站開發(fā)，是成都網站開發(fā)公司,為成都發(fā)電機維修提供網站建設服務,有成熟的網站定制合作流程，提供網站定制設計服務：原型圖制作、網站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網站改版熱線：13518219792
代碼解讀
定義dom，容器中包含2個元素，分別代表2條軌道：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#999;
}
定義容器尺寸和子元素的布局方式：
.container{
font-size:30px;
width:calc(13em+0.5em);
height:8em;
display:flex;
flex-direction:column;
justify-content:space-between;
}
定義2個色值，一個亮的和一個暗的：
.container{
--dark:#222;
--light:#ddd;
}
畫出2條軌道的輪廓：
.track{
width:inherit;
height:2em;
border:1pxsolidvar(--dark);
}
為2條軌道的背景圖案，圖案是明暗相間的條紋，但第2條軌道要錯半個格：
.track{
background:linear-gradient(
90deg,
var(--dark)50%,
var(--light)50%
);
background-size:1em;
}
.track:nth-child(2){
background-position:0.5em;
}
用偽元素畫出2個矩形：
.track{
position:relative;
display:flex;
align-items:center;
}
.track::before{
content:'';
position:absolute;
width:2em;
height:0.8em;
background-color:var(--light);
}
讓這2個矩形在軌道上往復移動：
.track::before{
animation:move5slinearinfinitealternate;
}
@keyframesmove{
from{
left:0;
}
to{
left:calc(100%-2em);
}
}
此時，兩個矩形看起來是一先一后地前進的，但實際上它們是在同一時刻開始并且以相同的速度在移動。接下來我們來揭秘真相。
在dom中增加一個子元素，作為按鈕；
設置按鈕的樣式：
.toggle{
order:-1;
width:10em;
height:2em;
border:2pxsolidvar(--dark);
border-radius:0.2em;
font-size:0.5em;
font-family:sans-serif;
font-weight:bold;
color:black;
text-align:center;
line-height:2em;
cursor:pointer;
user-select:none;
}
為按鈕設置與軌道風格類似的背景，以及鼠標懸停效果：
.toggle{
background-image:linear-gradient(toright,#ddd50%,#99950%);
background-size:1em;
transition:0.5s;
}
.toggle:hover{
background-position:5em;
}
增加一段點擊按鈕時觸發(fā)的腳本，為軌道元素切換樣式：
let$toggle=document.getElementsByClassName('toggle')[0]
let$tracks=Array.from(document.getElementsByClassName('track'))
$toggle.addEventListener('click',function(){
$tracks.forEach(track=>track.classList.toggle('highlights'))
})
終于，謎底就在切換樣式之后被揭曉了：
.track::before{
box-sizing:border-box;
border:solidvar(--dark);
border-width:0;
}
.track.highlights::before{
background-color:white;
border-width:0.1em;
}
看完了這篇文章，相信你對“怎么用純CSS實現(xiàn)條紋錯覺的動畫效果”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
