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

Editor to share with you how to use CSS and D3 to achieve a group of colorful lights, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Code interpretation

Define dom. The container contains 9 elements, representing 9 numbers:

three

one

four

one

five

nine

two

six

five

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.pi {

Width:30em

Height:30em

Font-size:12px

}

Lay out nine numbers into a 3x3 grid:

.pi {

Display:grid

Grid-template-columns:repeat (3Jing 1fr)

Grid-gap:0.2em

}

.pispan {

Color:white

Font-size:3em

Background-color:hsl (40% 40%)

Font-family:sans-serif

Border-radius:50%

Display:flex

Align-items:center

Justify-content:center

User-select:none

}

Define the css variable in dom, whose value is equal to the number represented by the element:

three

one

four

one

five

nine

two

six

five

Set different background colors for different numbers:

.pispan {

-- c:hsl (calc (var (--d) * 36), 40% mine40%)

Background-color:var (--c)

}

Make the color of the number the same as the background, and when hovering over the mouse, the height of the current number:

.pispan {

Color:var (--c)

Transition:0.3s

}

.pispan: hover {

Background-color:white

Color:black

Box-shadow:001emyellow

}

At this point, the visual design is complete, and then the dom elements and css variables are processed in batches with d3.

Introduce the d3 library:

Delete the dom element representing the number in the html file, create the dom element representing the number with d3, and set the css variable:

ConstPI='314159265'

D3.select ('.pi')

.selectAll ('span')

.data (PI)

.enter ()

.append ('span')

.style ('--dudes, (d) = > d)

.text ((d) = > d)

Change the PI to 100 bits:

ConstPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067'

At the same time, change the grid to the layout of 10: 10:

.pi {

Grid-template-columns:repeat (10meme 1fr)

}

.pispan {

Font-size:1.3em

}

Next, make the effect of cyclic lighting.

Add the css class to each numeric element, the class name of the number 0 is d0, the class name of the number 1 is D2, and so on:

D3.select ('.pi')

.selectAll ('span')

.data (PI)

.enter ()

.append ('span')

.attr ('class', (d) = > `d$ {d} `)

.style ('--dudes, (d) = > d)

.text ((d) = > d)

Define the loop variable number, which increments gradually from 1:

Letnumber=1

Define a function that highlights a set of elements of a specific number:

Functionshow () {

D3.selectAll (`.pispan.d ${number} `)

.classed ('show',true)

D3.selectAll (`.pispan.d ${(number-1)} `)

.classed ('show',false)

Number++

}

Finally, set an interval and call the above function repeatedly to light up each group of digits in turn:

SetInterval (show,500)

The above is all the contents of the article "how to use CSS and D3 to achieve a set of colorful lights". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.