How to use CSS and D3 to realize a group of colored lights
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!
