JS特效第86弹：炫酷的2022新年快乐html网页特效_js新年特效

作者：凡人多烦事01 | 2024-02-16 04:50:50

踩

js新年特效

一款效果超级炫酷的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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/90861