This is my 15th day of the Gwen Challenge
Effect:
Implementation:
1. Define labels,.main is the bottom box,.txt is the text,.dot is the small circle in the picture, add a lot of dynamic js.
<div class="main">
<h1 class="txt">Night of the Northern Lights</h1>
<div class="dot" style="--color: red;"></div>
</div>
Copy the codestyle=”- -color: red;” This is the application of the var function. Click on the link at the beginning of the article. 2. Basic style of bottom box:
.main{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0.0.0);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
cursor: pointer;
}
Copy the codeposition: fixed; top: 0; left: 0; width: 100%; height: 100%; Position it relative to the browser window and make it the same size as the window. display: flex; Flex layout; justify-content: space-around; The principal subelements bisect the remaining space. flex-wrap: wrap; Define multiple lines. align-content: space-around; The lateral axis elements bisect the remaining space. cursor: pointer; Mouse style for small hands.
3. Basic style of small circle:
.dot{
position: relative;
width: 20px;
height: 20px;
}
Copy the codeposition: relative; Relative positioning.
4. Display small circles with double pseudo-classes:
.dot::before{
content: ' ';
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
right: 1px;
background-color: rgba(65.64.64.5);
border-radius: 50%;
transition: all 120s ease-out;
}
Copy the codeposition: absolute; Rgba (65, 64, 64,.5); Color border – the radius: 50%; Transition: all 120s ease-out; Transition effect.
5. Mouse over the circle style change, color change, shadow change:
.dot:hover::before{
background-color: var(--color);
box-shadow: 0 0 2px var(--color),
0 0 4px var(--color),
0 0 6px var(--color),
0 0 8px var(--color);
transition: all 0s ease-out;
}
Copy the codevar(- -color); The application of var function is described at the beginning of the linked article. Box-shadow: 0 0 2px var(–color), shadow. transition: all 0s ease-out; Set the transition effect to 0 seconds. This will only make the transition when the mouse moves out of the circle.
6. Text style:
.txt{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'fangsong';
font-size: 80px;
color: rgba(255.255.255.6);
letter-spacing: 10px;
}
Copy the codeposition: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); Center and align. letter-spacing: 10px; Word spacing.
7. Js section, to achieve a large number of dynamic small circle spread over the browser viewable area, see notes:
<script>
/* Get the main element of the underlying box */
var main = document.querySelector('.main');
/* Get the width of main */
let width = main.offsetWidth;
/* Get the height of main */
let height = main.offsetHeight;
/* Create a color array and put several colors */
let color = ["#BBFF00"."#FF3333"."#FFFF77"."#0044BB"."#FF77FF"."#99FFFF"."#DDDDDD"."#FF44AA"];
/* Calculate how many small circles are needed for a row. The circle is 20*20 */
let chuang = Math.floor(width / 20);
/* Calculate how many small circles are required for a column */
let kuan = Math.floor(height / 20);
/* Total number of circles */
let zong = chuang*kuan;
/* Loop to add all circles */
for(let i=1; i<zong; i++) {/* Create div box */
let dot = document.createElement('div');
/* Add a selector */ with a class name of.dot to the new box
dot.classList.add('dot');
/* Add the --color value */ to the new box
dot.style.cssText=` --color: ${color[Math.floor(Math.random() * 8)]}; `
/* Add the new div */ to the underlying box main
main.appendChild(dot);
}
</script>
Copy the codeMath.floor() returns the largest integer less than or equal to a given number. The math.random () function returns a floating point pseudo-random number in the range from 0 to less than 1, that is, up from 0 (including 0) but not including 1 (excluding 1), which you can then scale to the desired range. Realize the initial seed selection to random number generation algorithm; It cannot be selected or reset by the user. Math.floor(math.random () * (max-min + 1)) + min; Get a random integer between two numbers (min and Max), including two numbers. Math. The random () function
Complete code:
<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<meta charset="zh-CN">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>* {margin: 0;
padding: 0;
}
.main{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0.0.0);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
cursor: pointer;
}
.dot{
position: relative;
width: 20px;
height: 20px;
}
.dot::before{
content: ' ';
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
right: 1px;
background-color: rgba(65.64.64.5);
border-radius: 50%;
transition: all 120s ease-out;
}
.dot:hover::before{
background-color: var(--color);
box-shadow: 0 0 2px var(--color),
0 0 4px var(--color),
0 0 6px var(--color),
0 0 8px var(--color);
transition: all 0s ease-out;
}
.txt{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'fangsong';
font-size: 80px;
color: rgba(255.255.255.6);
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="main">
<h1 class="txt">Night of the Northern Lights</h1>
<div class="dot" style="--color: red;"></div>
</div>
<script>
/* Get the main element of the underlying box */
var main = document.querySelector('.main');
/* Get the width of main */
let width = main.offsetWidth;
/* Get the height of main */
let height = main.offsetHeight;
/* Create a color array and put several colors */
let color = ["#BBFF00"."#FF3333"."#FFFF77"."#0044BB"."#FF77FF"."#99FFFF"."#DDDDDD"."#FF44AA"];
/* Calculate how many small circles are needed for a row. The circle is 20*20 */
let chuang = Math.floor(width / 20);
/* Calculate how many small circles are required for a column */
let kuan = Math.floor(height / 20);
/* Total number of circles */
let zong = chuang*kuan;
/* Loop to add all circles */
for(let i=1; i<zong; i++) {/* Create div box */
let dot = document.createElement('div');
/* Add a selector */ with a class name of.dot to the new box
dot.classList.add('dot');
/* Add a random color */ to the new box
dot.style.cssText=` --color: ${color[Math.floor(Math.random() * 8)]}; `
/* Add the new div */ to the underlying box main
main.appendChild(dot);
}
</script>
</body>
</html>
Copy the codeConclusion:
The sky is blue and there are thousands of paper cranes outside the window
Other articles: Colorful Streamer text HTML + CSS Bubble Floating Background EFFECT HTML + CSS Simple clock effect HTML + CSS Cyberpunk style button HTML + CSS Responsive card hover effect HTML + CSS Water wave loading animation HTML + CSS Navigation bar scrolling gradient effect HTML + CSS + JS Book page turning HTML + CSS 3D stereo album HTML + CSS dazzling light button HTML + CSS Remember some CSS properties summary (a) Sass summary note…… Etc.