I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Hello! Gold digging friends hello, I am the evildoer where to escape, yesterday wrote a use CSS to make the night of the Mid-Autumn Festival stars flashing effect of technical article response is not optimistic, I still have a little lost; Hope you can give more support; Thank you very much! Today we are going to implement the dynamic effect of an element color transformation.

Start of the text ~

Background star flicker

This is omitted here. Please refer to the code I wrote yesterdayUse CSS to create a night star twinkle effect for Mid-Autumn Festival;

Painting the big and bright moon

HTML code <div> <div class="moon"> </div> </div> CSS code. Moon {margin: 0 auto; position: absolute; top: 50%; transform: translateY(-300px); box-sizing: border-box; left: 0; right: 0; width: 600px; height: 600px; border-radius: 50%; background: white; Opacity: 0.9; box-shadow: 0px 0px 40px 15px white; z-index: 1; text-align: center; }Copy the code

Box shadow: Box shadow: box shadow: box shadow

Box-shadow: *h-shadow v-shadow blur spread color* inset; * Note: The * boxShadow attribute adds one or more drop shadows to the box. This property is a comma-separated list of shadows, each defined by 2-4 length values, an optional color value, and an optional inset keyword. The value of the ellipsis length is 0.Copy the code

The moon joins the motional effect of a poem about the Mid-Autumn Festival

This is a font color can be randomly changed animation

< P > Tang Dynasty: Qi Has "Autumn Moon" </ P > < P > Empty blue cloud dew wet clothes, stars of light outside the gushing rules. </p> <p> <p> <p> <p> <p> <p> <p> <p> </ P > < P > Also xu Clear Yin Hao soul, willing to teach dim take Dan branch. </ P > < P > Poor night moonlight, is the five hou residual wine. </p> </div> CSS code with the moon above CSS p {color: chartreuse; font-size: 24px; font-weight: bold; } p:first-child { margin-top: 30%; } JS code block function changeEvent () {let list = document. The getElementsByTagName (' p ') for (I = 0; i < list.length; i++) { list[i].style.color = "#" + (~~(Math.random() * (1 << 24))).toString(16) } } changeEvent() setInterval(() => { ChangeEvent ()}, 1500) I posted a code, do you think this logic action is too simple, MY mentality collapsed!Copy the code

This is done by changing the style attribute of the element to the js Math formula math.room and converting it to hexadecimal; Finally, set a timer

Add a happy Mid-Autumn Festival word dynamic effect

It doesn’t matter if you look at this motion effect and you think it’s ugly, but the important thing is to show the effect of random color transformation

< P > Tang Dynasty: Qi Has "Zhong Qiu Yue" </p> < P > Empty blue cloud dew wet clothes, stars of light outside the chung qing rules. </p> <p> <p> <p> <p> <p> <p> <p> <p> </ P > < P > Also xu Clear Yin Hao soul, willing to teach dim take Dan branch. </ P > < P > Poor night moonlight, is the five hou residual wine. </p> </div> <div class="textRight text"> </div> CSS code. height: 400px; line-height: 200px; border: 8px solid #fff; text-align: center; color: #fff; font-size: 80px; font-weight: bold; position: absolute; top: 50%; transform: translateY(-200px); } .textLeft { left: 15%; } .textRight { right: 15%; } changeEvent method of JS code in the previous step to add the following code is good let the text list = document. The getElementsByClassName (' text ') for (I = 0; i < textList.length; i++) { textList[i].style.color = "#" + (~~(Math.random() * (1 << 24))).toString(16) textList[i].style.border = "8px solid #" + (~~(Math.random() * (1 << 24))).toString(16) }Copy the code

This is just a little bit more random border color than the previous step

conclusion

Now, in fact, the dynamics like this random color transformation can be designed to be really cool; Feel free to give it a try!