大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么用纯CSS实现条纹错觉的动画效果

小编给大家分享一下怎么用纯CSS实现条纹错觉的动画效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司成都网站建设定制网站开发,是成都网站开发公司,为成都发电机维修提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站改版热线: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中增加一个子元素,作为按钮;

Showmethetruth

设置按钮的样式:

.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实现条纹错觉的动画效果

看完了这篇文章,相信你对“怎么用纯CSS实现条纹错觉的动画效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


标题名称:怎么用纯CSS实现条纹错觉的动画效果
本文URL:http://dzwzjz.com/article/jgcdjp.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP