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

马coder

于 2024-01-14 18:00:00 发布

阅读量477

点赞数 9

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_38343072/article/details/134939539

版权

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