效果：
實作：
1. 定義標簽，.main是底層盒子，.txt是文字，.dot是圖中的小圓圈，用js動態大量添加，
<div class="main">
<h1 class="txt">北極光之夜</h1>
<div class="dot" style="--color: red;"></div>
</div>
style="- -color: red;" 這個是var函式的應用，點擊鏈接文章的開頭講有，
2. 底層盒子的基本樣式：
.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;
}
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; 相對于瀏覽器視窗進行定位，然后跟視窗一樣大，
display: flex; flex布局；
justify-content: space-around; 主軸子元素平分剩余空間排列，
flex-wrap: wrap; 定義多行，
align-content: space-around; 側軸子元素平分剩余空間排列，
cursor: pointer; 滑鼠樣式為小手，
3. 小圓圈的基本樣式：
.dot{
position: relative;
width: 20px;
height: 20px;
}
position: relative; 相對定位，
4. 用雙偽類顯示小圓圈：
.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;
}
position: absolute; 絕對定位
background-color: rgba(65, 64, 64,.5); 顏色
border-radius: 50%;角弧度
transition: all 120s ease-out; 過渡效果，
5. 滑鼠經過圓圈樣式變化，顏色變，陰影變：
.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;
}
var(- -color);中的var函式的應用，點擊鏈接的文章的開頭講有，
box-shadow: 0 0 2px var(–color), 陰影，
transition: all 0s ease-out; 設定過渡效果為0秒，這樣只有滑鼠離開圓圈的時候才有過渡了，
6. 文本的樣式：
.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;
}
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); 居中對齊，
letter-spacing: 10px; 字間距，
7. js 部分，實作動態大量小圓圈鋪滿瀏覽器可視區，看注釋：
<script>
/* 獲取底層盒子main元素 */
var main = document.querySelector('.main');
/* 得到main的寬度 */
let width = main.offsetWidth;
/* 得到main的高度 */
let height = main.offsetHeight;
/* 建一個顏色陣列，放上幾種顏色 */
let color = ["#BBFF00","#FF3333","#FFFF77","#0044BB","#FF77FF","#99FFFF","#DDDDDD","#FF44AA"];
/* 計算一行需要多少的小圓圈，圓圈是20*20的 */
let chuang = Math.floor(width / 20);
/* 計算一列需要多少的小圓圈 */
let kuan = Math.floor(height / 20);
/* 圓圈的總數 */
let zong = chuang*kuan;
/* 回圈添加全部圓圈 */
for(let i=1;i<zong;i++)
{
/* 創建div盒子 */
let dot = document.createElement('div');
/* 給新建的盒子添加類名為.dot的選擇器 */
dot.classList.add('dot');
/* 給新建的盒子添加--color的值 */
dot.style.cssText=` --color: ${color[Math.floor(Math.random() * 8) ]}; `
/* 給底層盒子main添加這個新建的div */
main.appendChild(dot);
}
</script>
Math.floor()
回傳小于或等于一個給定數字的最大整數，
Math.random() 函式回傳一個浮點數, 偽亂數在范圍從0到小于1，也就是說，從0（包括0）往上，但是不包括1（排除1），然后您可以縮放到所需的范圍，實作將初始種子選擇到亂數生成演算法;它不能被用戶選擇或重置，
而Math.floor(Math.random() * (max - min + 1)) + min;
得到一個兩數之間（min和max之間）的隨機整數，包括兩個數在內，
Math.random() 函式
完整代碼：
<!DOCTYPE html>
<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">北極光之夜</h1>
<div class="dot" style="--color: red;"></div>
</div>
<script>
/* 獲取底層盒子main元素 */
var main = document.querySelector('.main');
/* 得到main的寬度 */
let width = main.offsetWidth;
/* 得到main的高度 */
let height = main.offsetHeight;
/* 建一個顏色陣列，放上幾種顏色 */
let color = ["#BBFF00","#FF3333","#FFFF77","#0044BB","#FF77FF","#99FFFF","#DDDDDD","#FF44AA"];
/* 計算一行需要多少的小圓圈，圓圈是20*20的 */
let chuang = Math.floor(width / 20);
/* 計算一列需要多少的小圓圈 */
let kuan = Math.floor(height / 20);
/* 圓圈的總數 */
let zong = chuang*kuan;
/* 回圈添加全部圓圈 */
for(let i=1;i<zong;i++)
{
/* 創建div盒子 */
let dot = document.createElement('div');
/* 給新建的盒子添加類名為.dot的選擇器 */
dot.classList.add('dot');
/* 給新建的盒子添加一個隨機顏色 */
dot.style.cssText=` --color: ${color[Math.floor(Math.random() * 8) ]}; `
/* 給底層盒子main添加這個新建的div */
main.appendChild(dot);
}
</script>
</body>
</html>
總結：
天空是蔚藍色，窗外有千紙鶴~
敲代碼聽《MOM》這首歌賊有感覺~
其它文章：
炫彩流光文字 html+css
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
回應式卡片懸停效果 html+css
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
炫彩流光按鈕 html+css
記一些css屬性總結（一）
Sass總結筆記
…等
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266386.html
標籤：其他