技术要点
- box-shadow; 在元素的框架上添加阴影效果; 参考:MDN:box-shadow
- text-shadow; 为文字添加阴影; 参考:MDN:text-shadow
- animation; 元素的子元素可以被3D遮挡;参考:MDN:animation
- transform: skewY(-7deg); 倾斜角度; 参考:MDN:transform
具体实现
index.html HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy New Year</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h2>Happy New Year<br/><span>2021</span></h2>
</section>
<script src="index.js"></script>
<script>
textShadow("h2", 80);
textShadow("span", 20);
stars();
</script>
</body>
</html>
style.css 样式文件
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
overflow: hidden;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #111, #222, #111);
}
section::before {
content: "";
position: absolute;
width: 30vw;
height: 30vw;
border: 5vw solid #ff1062;
border-radius: 50%;
box-shadow: 0 0 0 1vw #222,
0 0 0 1.3vw #fff;
}
section i {
position: absolute;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 40px #fff,
0 0 80px #fff;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
h2 {
position: absolute;
font-size: 9vw;
color: #fff;
text-align: center;
line-height: 2em;
z-index: 10;
transform: skewY(-7deg);
/* text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #ccc,
3px 3px 0 #ccc,
4px 4px 0 #ccc,
5px 5px 0 #ccc,
10px 10px 0 rgba(0, 0, 0, 0.2); */
animation: floating 5s ease-in-out infinite;
}
h2 span {
font-weight: 700;
font-size: 3em;
/* text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #ccc,
3px 3px 0 #ccc,
4px 4px 0 #ccc,
5px 5px 0 #ccc,
6px 6px 0 #ccc,
7px 7px 0 #ccc,
8px 8px 0 #ccc,
9px 9px 0 #ccc,
10px 10px 0 #ccc,
20px 20px 0 rgba(0, 0, 0, 0.2); */
}
@keyframes floating {
0%, 100% {
transform: skewY(-7deg) translate(0, -1.5vw);
}
50% {
transform: skewY(-7deg) translate(0, 1.5vw);
}
}
index.js
/**
* 文字效果
* @param {string} elementQuery 文字元素
* @param {number} cutNumber 切边(text-shadow 高度
*/
function textShadow(elementQuery, cutNumber) {
const element = document.querySelector(elementQuery);
let textShadow = "";
let i=0;
for(i; i<Math.floor(element.offsetWidth/cutNumber); i++) {
textShadow += `${i}px ${i}px 0 #ccc,`;
}
element.style.textShadow = textShadow += `${i * 2}px ${i * 2}px 0 rgba(0, 0, 0, 0.2)`;
}
/**
* 星星点状背景实现
*/
function stars() {
const count = 200;
const section = document.querySelector("section");
let i = 0;
while(i < count) {
const star = document.createElement("i");
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
const size = Math.random() * 4;
star.style.left = x + "px";
star.style.top = y + "px";
star.style.width = 1 + size + "px";
star.style.height = 1 + size + "px";
const duration = Math.random() * 2;
star.style.animationDelay = 2 + duration + "s";
section.appendChild(star);
i++;
}
}
内容来源于公众号 @前端先锋