CSS星空炫技

# Pattern Effect (基于 CSS Doodle 实现)

# 实现的实例

# 实现

所需文件 index.html style.css (scss) script.js (Babel)

# 第一部分 `index.html`

<css-doodle grid="100x100">
   :doodle {
       @size: 100vw 100vmin;
       perspective: 10px;
   }
   :container {
       perspective: 50px;
       transform-style: preserve-3d;
   }
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 2px;
   border-radius: 50%;
   left: 50%;
   top: 50%;
   background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
   transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
   animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
   box-shadow: 0 0 1px #fff, 0 0 5px #fff;
   @keyframes move {
       100% {
           margin-top: 500px;
       }
   }
</css-doodle>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

用于创建大量的随机点并且以柏林噪声分布

# 第二部分 `style.css`

html,
body {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
    animation: change 10s linear infinite;
}

@keyframes change {
    10% {
        filter: hue-rotate(360deg);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

用于颜色变化

# 第三部分 `script.js`

const doodle = document.querySelector('css-doodle');

document.addEventListener('click', function(e) {
  doodle.update();
});

1
2
3
4
5

用于点击刷新页面

编辑

上次更新: 2023/12/24, 19:03:47

← 搜索引擎使用技巧面试问题集锦→