js实现鼠标跟随五彩缤纷星星散落动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现鼠标跟随五彩缤纷星星散落动画效果代码

代码标签: js 鼠标 跟随 五彩 缤纷 星星 散落 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CodeHim">
    <style>
        @charset "UTF-8";.star {
            transform-style: preserve-3d;
            width: 1px;
            height: 1px;
            position: absolute;
            color: red
        }
        
        .star:before {
            position: absolute;
            content: "✦";
            color: inherit;
            inset: 0;
            text-shadow: 0 0 .8em #fff5
        }
        
        .cd__main {
            margin: 0;
            min-height: 100vh;
            font-family: "Montserrat",sans-serif;
            color: #F9F6EF;
            display: grid;
            place-content: center;
            background-image: radial-gradient(circle at 50% 50%,#2f3040,#1f2020)!important
        }
    </style>
</head>

<body>

    <div style="max-width: 960px; margin: 5px auto; flex: 100%; "></div>
    <main class="cd__main">
        <h1>Move your mouse around</h1>
    </main>
    <script>
        let x1=0, y1=0;
        window.client
        const 
          vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
          dist_to_draw = 50,
          delay = 1000,
          fsize = [
            '1.1rem', '1.4rem', '.8rem', '1.7rem'
          ],
          colors = [
          '#E23636',
          '#F9F3EE',
          '#E1F8DC',
          '#B8AFE6',
          '#AEE1CD',
          '.........完整代码请登录后点击上方下载按钮下载查看

网友评论0