一款效果超级炫酷的2022新年快乐html网页特效(完全可以根据实际情况修改相应的年份),霓虹的城市夜景和绚烂的烟花很是特别,该html页面还有交互效果,点击鼠标就会呈现烟花绽放的特效,唯美不过如此,先来看看效果:
一部分关键的代码如下:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="CodePen">
<title>2022新年快乐(午夜放映,点击观看烟花)</title>
<link rel="stylesheet" href="css/style.css">
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: Montserrat, sans-serif;
background-image: url(img/pexels-photo-219692.jpeg);
background-size: cover;
background-position: center;
}
canvas {
mix-blend-mode: lighten;
cursor: pointer;
}
#hero {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: color-dodge;
}
#year {
font-size: 30vw;
color: #d0d0d0;
font-weight: bold;
}
#timeleft {
color: #fbfbfb;
font-size: 2.5vw;
text-align: center;
font-family: Lora, serif;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div id="hero">
<di