Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve the animation effect of stripe illusion, I hope you will gain something after reading this article, let's discuss it together!

Code interpretation

Define dom. The container contains 2 elements, each representing 2 tracks:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:#999

}

Define the container size and how child elements are laid out:

.container {

Font-size:30px

Width:calc (13em+0.5em)

Height:8em

Display:flex

Flex-direction:column

Justify-content:space-between

}

Define two color values, one bright and one dark:

.container {

-- dark:#222

-- light:#ddd

}

Draw the outline of 2 tracks:

.track {

Width:inherit

Height:2em

Border:1pxsolidvar (--dark)

}

It is the background pattern of 2 tracks, the pattern is light and dark stripes, but the second track is half a grid wrong:

.track {

Background:linear-gradient (

90deg

Var (--dark) 50%

Var (--light) 50%

)

Background-size:1em

}

.track:nth-child (2) {

Background-position:0.5em

}

Draw 2 rectangles with pseudo elements:

.track {

Position:relative

Display:flex

Align-items:center

}

.track:: before {

Content:''

Position:absolute

Width:2em

Height:0.8em

Background-color:var (--light)

}

Let the two rectangles move back and forth on the track:

.track:: before {

Animation:move5slinearinfinitealternate

}

@ keyframesmove {

From {

Left:0

}

To {

Left:calc (100%-2em)

}

}

At this point, the two rectangles seem to move forward one by one, but in fact they start at the same time and move at the same speed. Next, let's reveal the truth.

Add a child element to the dom as a button

Showmethetruth

Style the button:

.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

}

Set a background similar to the track style for the button, as well as the mouse hover effect:

.toggle {

Background-image:linear-gradient (toright,#ddd50%,#99950%)

Background-size:1em

Transition:0.5s

}

.toggle: hover {

Background-position:5em

}

Add a script that is triggered when a button is clicked to switch styles for track elements:

Let$toggle=document.getElementsByClassName ('toggle') [0]

Let$tracks=Array.from (document.getElementsByClassName ('track'))

$toggle.addEventListener ('click',function () {)

$tracks.forEach (track= > track.classList.toggle ('highlights'))

})

Finally, the answer was revealed after switching styles:

.track:: before {

Box-sizing:border-box

Border:solidvar (--dark)

Border-width:0

}

.track.highlights:: before {

Background-color:white

Border-width:0.1em

}

After reading this article, I believe you have a certain understanding of "how to use pure CSS to achieve the animation effect of stripe illusion". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.