小编给大家分享一下怎么用纯CSS实现条纹错觉的动画效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
代码解读
定义dom，容器中包含2个元素，分别代表2条轨道：
<divclass="container">
<spanclass='track'></span>
<spanclass='track'></span>
</div>
居中显示：
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中增加一个子元素，作为按钮；
<pclass="container">
<spanclass='track'></span>
<spanclass='track'></span>
<spanclass="toggle">Showmethetruth</span>
</p>
设置按钮的样式：
.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;
}
增加一段点击按钮时触发的脚本，为轨道元素切换样式：
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实现条纹错觉的动画效果”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
