视觉美化

请注意，本文最近一次更新于：2022-05-05,文章内容可能已经不具有时效性，请谨慎参考

本文最后更新于：2022年5月5日星期四凌晨12点01分 +08:00

好看的美化系列

飘落特效

1
2
3
4
樱花🌸   src="https://mochu.co/share/sakura/yinghua.png"; 
枫叶🍁   src="ttps://xn--e1t46na.xn--6qq986b3xl/usr/plugins/WenYu/assets/js/gyezi/images/003.png";
绿叶🍃   src="https://xn--e1t46na.xn--6qq986b3xl/usr/plugins/WenYu/assets/js/gyezi/images/001.png";
三叶草☘  src="https://xn--e1t46na.xn--6qq986b3xl/usr/plugins/WenYu/assets/js/gyezi/images/002.png";
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<script type="text/javascript">
var stop, staticx;
var img = new Image();
img.src = "这里是散落物体的图片，不只是樱花也可以是其他的东西";

// 樱花数量
var sakuraNum = 20;
// 樱花越界限制次数, -1不做限制,无限循环
var limitTimes = -1;

// 定义限制数组
var limitArray = new Array(sakuraNum);
for (var index = 0; index < sakuraNum; index++) {
    limitArray[index] = limitTimes;
}


function Sakura(x, y, s, r, fn, idx) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn;
    this.idx = idx;
}

Sakura.prototype.draw = function(cxt) {
    cxt.save();
    var xc = 40 * this.s / 4;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore();
}

// 无飘落代码
Sakura.prototype.update = function() {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);

    // 如果樱花越界, 重新调整位置
    if (this.x > window.innerWidth ||
        this.x < 0 ||
        this.y > window.innerHeight ||
        this.y < 0
    ) {

        // 如果樱花不做限制
        if (limitArray[this.idx] == -1) {
            this.r = getRandom('fnr');
            if (Math.random() > 0.4) {
                this.x = getRandom('x');
                this.y = 0;
                this.s = getRandom('s');
                this.r = getRandom('r');
            } else {
                this.x = window.innerWidth;
                this.y = getRandom('y');
                this.s = getRandom('s');
                this.r = getRandom('r');
            }
        }
        // 否则樱花有限制
        else {
            if (limitArray[this.idx] > 0) {
                this.r = getRandom('fnr');
                if (Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
                limitArray[this.idx]--;
            }
        }


    }
}


SakuraList = function() {
    this.list = [];
}
SakuraList.prototype.push = function(sakura) {
    this.list.push(sakura);
}

// list update 方法
SakuraList.prototype.update = function() {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update();
    }
}


SakuraList.prototype.draw = function(cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt);
    }
}
SakuraList.prototype.get = function(i) {
    return this.list[i];
}
SakuraList.prototype.size = function() {
    return this.list.length;
}

function getRandom(option) {
    var ret, random;
    switch (option) {
        case 'x':
            ret = Math.random() * window.innerWidth;
            break;
        case 'y':
            ret = Math.random() * window.innerHeight;
            break;
        case 's':
            ret = Math.random();
            break;
        case 'r':
            ret = Math.random() * 6;
            break;
        case 'fnx':
            random = -0.5 + Math.random() * 1;
            ret = function(x, y) {
                return x + 0.5 * random - 1.7;
            };
            break;
        case 'fny':
            random = 1.5 + Math.random() * 0.7
            ret = function(x, y) {
                return y + random;
            };
            break;
        case 'fnr':
            random = Math.random() * 0.03;
            ret = function(r) {
                return r + random;
            };
            break;
    }
    return ret;
}

function startSakura() {

    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;
    var canvas = document.createElement('canvas'),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
    canvas.setAttribute('id', 'canvas_sakura');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    cxt = canvas.getContext('2d');
    var sakuraList = new SakuraList();
    // 设置樱花个数 , 设置21 ,每一朵樱花都是爱你的形状 dwj~
    for (var i = 0; i < sakuraNum; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        }, i);
        sakura.draw(cxt);
        sakuraList.push(sakura);
    }

    stop = requestAnimationFrame(function() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        // 修改樱花位置逻辑
        sakuraList.update();
        // 画出修改后的樱花
        sakuraList.draw(cxt);
        // 递归 修改位置, 画出修改后的樱花
        stop = requestAnimationFrame(arguments.callee);
    })
}

window.onresize = function() {
    var canvasSnow = document.getElementById('canvas_snow');
    // canvasSnow 在改变浏览器大小的时候会为null
    if (canvasSnow) {
        canvasSnow.width = window.innerWidth;
        canvasSnow.height = window.innerHeight;
    }
}

img.onload = function() {
    startSakura();
}

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false;
    } else {
        startSakura();
    }
}
</script>

目录美化

原理

这里采用`套娃`的方法，事先准备好伪类对象，并在移动到对象时释放效果。这里需要运用到`filter`实现对象的颜色模糊与偏移，由于没有图床就不上效果图了，可以直接复制代码观看效果

源码 
1
2
3
4
5
6
7
8
9
10
<body>
    <ul class="menu_beautify_list">
        <li class="menu_beautify" style="--clr:#00ade1">
            <a href="#" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a>
        </li>
        <li class="menu_beautify" style="--clr:#ff6492">
            <a href="#" data-text="&nbsp;About">&nbsp;About&nbsp;</a>
        </li>
    </ul>
</body>
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
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
.menu_beautify_list{
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  width: auto;
  gap: 20px;
  font-family: 'Mochiy Pop One', sans-serif;
}
.menu_beautify_list .menu_beautify{
  position: relative;
  list-style: none;
}
.menu_beautify_list .menu_beautify a {
  font-size: 4em;
  text-decoration: none;
  letter-spacing: 2px;
  line-height: 2em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
.menu_beautify_list .menu_beautify a::before {
  content: attr(data-text);
  position: absolute;
  color: var(--clr);
  width: 0;
  overflow: hidden;
  transition: 1s;
  border-right: 4px solid var(--clr);
  -webkit-text-stroke: 2px var(--clr);
}
.menu_beautify_list .menu_beautify a:hover::before {
  width: 100%;
  filter: drop-shadow(0 0 10px var(--clr))
}

简易加载动画

源码 
1
2
3
<div class="ripple"></div>
<div class="ripple" style="filter:hue-rotate(240deg)"></div>
<div class="ripple" style="filter:grayscale()"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.ripple{
    width: 1rem;
    background: #ff0;
}
.ripple::before,
.ripple::after,
.ripple{
    content: "";
    display: grid;
    grid-area: 1/1;
    aspect-ration: 1; /* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
    border-radius: 50%;
    box-shadow: 0 0 0 0 #ff04;
    animation: sim_load 3s linear infinite var(--s,0s)
}
.ripple::before{--s: 1s}
.ripple::after{--s: 2s}
@keyframes sim_load{
    to {box-shadow: 0 0 0 6rem #0000}
}
效果

简易烟花

说明

考虑到内存大小，就不展示效果啦~复制即可食用

源码 
1
2
3
4
<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
}

.cssfirework > .before, .cssfirework > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.cssfirework > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: -189px -69.6666666667px #ff007b, -144px -23.6666666667px #c400ff, 5px -125.6666666667px aqua, -130px -97.6666666667px #00ff5e, -8px -103.6666666667px #00fffb, 195px -401.6666666667px #ff0040, -56px -315.6666666667px #00ffc8, -130px -136.6666666667px #0011ff, 154px -313.6666666667px #ee00ff, 150px 23.3333333333px #5eff00, -188px -283.6666666667px #ff008c, -56px -26.6666666667px #00ffea, 187px -264.6666666667px #aaff00, 193px -162.6666666667px #ff0062, 193px -338.6666666667px #ffee00, -142px -83.6666666667px #00d9ff, -173px -171.6666666667px #ff4d00, -16px -35.6666666667px #008cff, 160px -66.6666666667px #ff00d5, -30px 61.3333333333px #c4ff00, 237px -208.6666666667px #ff00e6, 149px -108.6666666667px #ff9100, -161px -317.6666666667px #ffd000, -19px -177.6666666667px #0080ff, -112px -277.6666666667px #ffaa00, 157px -54.6666666667px fuchsia, 106px -206.6666666667px #e600ff, 76px -160.6666666667px #c800ff, -114px -323.6666666667px #ffbf00, 87px -165.6666666667px #2200ff, -134px -284.6666666667px #ff0088, 108px -0.6666666667px #ff0088, -201px -334.6666666667px #51ff00, -77px -99.6666666667px #b3ff00, 149px -356.6666666667px #f7ff00, -157px -341.6666666667px #00f2ff, -208px -63.6666666667px #00ff66, -182px -66.6666666667px #ae00ff, 30px -242.6666666667px #00ff09, -136px -39.6666666667px #00ff4d, 244px 23.3333333333px #ffe600, -192px -401.6666666667px #1500ff, 9px -357.6666666667px #ff003c, 235px -189.6666666667px #ff0077, -248px -222.6666666667px #88ff00, 31px -191.6666666667px #006aff, -27px -283.6666666667px #d000ff, 189px -7.6666666667px #fbff00, 108px -123.6666666667px #00ffbf, 79px -360.6666666667px #55ff00, -223px -345.6666666667px fuchsia;
    }
}
@-moz-keyframes bang {
    to {
        box-shadow: -189px -69.6666666667px #ff007b, -144px -23.6666666667px #c400ff, 5px -125.6666666667px aqua, -130px -97.6666666667px #00ff5e, -8px -103.6666666667px #00fffb, 195px -401.6666666667px #ff0040, -56px -315.6666666667px #00ffc8, -130px -136.6666666667px #0011ff, 154px -313.6666666667px #ee00ff, 150px 23.3333333333px #5eff00, -188px -283.6666666667px #ff008c, -56px -26.6666666667px #00ffea, 187px -264.6666666667px #aaff00, 193px -162.6666666667px #ff0062, 193px -338.6666666667px #ffee00, -142px -83.6666666667px #00d9ff, -173px -171.6666666667px #ff4d00, -16px -35.6666666667px #008cff, 160px -66.6666666667px #ff00d5, -30px 61.3333333333px #c4ff00, 237px -208.6666666667px #ff00e6, 149px -108.6666666667px #ff9100, -161px -317.6666666667px #ffd000, -19px -177.6666666667px #0080ff, -112px -277.6666666667px #ffaa00, 157px -54.6666666667px fuchsia, 106px -206.6666666667px #e600ff, 76px -160.6666666667px #c800ff, -114px -323.6666666667px #ffbf00, 87px -165.6666666667px #2200ff, -134px -284.6666666667px #ff0088, 108px -0.6666666667px #ff0088, -201px -334.6666666667px #51ff00, -77px -99.6666666667px #b3ff00, 149px -356.6666666667px #f7ff00, -157px -341.6666666667px #00f2ff, -208px -63.6666666667px #00ff66, -182px -66.6666666667px #ae00ff, 30px -242.6666666667px #00ff09, -136px -39.6666666667px #00ff4d, 244px 23.3333333333px #ffe600, -192px -401.6666666667px #1500ff, 9px -357.6666666667px #ff003c, 235px -189.6666666667px #ff0077, -248px -222.6666666667px #88ff00, 31px -191.6666666667px #006aff, -27px -283.6666666667px #d000ff, 189px -7.6666666667px #fbff00, 108px -123.6666666667px #00ffbf, 79px -360.6666666667px #55ff00, -223px -345.6666666667px fuchsia;
    }
}
@-o-keyframes bang {
    to {
        box-shadow: -189px -69.6666666667px #ff007b, -144px -23.6666666667px #c400ff, 5px -125.6666666667px aqua, -130px -97.6666666667px #00ff5e, -8px -103.6666666667px #00fffb, 195px -401.6666666667px #ff0040, -56px -315.6666666667px #00ffc8, -130px -136.6666666667px #0011ff, 154px -313.6666666667px #ee00ff, 150px 23.3333333333px #5eff00, -188px -283.6666666667px #ff008c, -56px -26.6666666667px #00ffea, 187px -264.6666666667px #aaff00, 193px -162.6666666667px #ff0062, 193px -338.6666666667px #ffee00, -142px -83.6666666667px #00d9ff, -173px -171.6666666667px #ff4d00, -16px -35.6666666667px #008cff, 160px -66.6666666667px #ff00d5, -30px 61.3333333333px #c4ff00, 237px -208.6666666667px #ff00e6, 149px -108.6666666667px #ff9100, -161px -317.6666666667px #ffd000, -19px -177.6666666667px #0080ff, -112px -277.6666666667px #ffaa00, 157px -54.6666666667px fuchsia, 106px -206.6666666667px #e600ff, 76px -160.6666666667px #c800ff, -114px -323.6666666667px #ffbf00, 87px -165.6666666667px #2200ff, -134px -284.6666666667px #ff0088, 108px -0.6666666667px #ff0088, -201px -334.6666666667px #51ff00, -77px -99.6666666667px #b3ff00, 149px -356.6666666667px #f7ff00, -157px -341.6666666667px #00f2ff, -208px -63.6666666667px #00ff66, -182px -66.6666666667px #ae00ff, 30px -242.6666666667px #00ff09, -136px -39.6666666667px #00ff4d, 244px 23.3333333333px #ffe600, -192px -401.6666666667px #1500ff, 9px -357.6666666667px #ff003c, 235px -189.6666666667px #ff0077, -248px -222.6666666667px #88ff00, 31px -191.6666666667px #006aff, -27px -283.6666666667px #d000ff, 189px -7.6666666667px #fbff00, 108px -123.6666666667px #00ffbf, 79px -360.6666666667px #55ff00, -223px -345.6666666667px fuchsia;
    }
}
@-ms-keyframes bang {
    to {
        box-shadow: -189px -69.6666666667px #ff007b, -144px -23.6666666667px #c400ff, 5px -125.6666666667px aqua, -130px -97.6666666667px #00ff5e, -8px -103.6666666667px #00fffb, 195px -401.6666666667px #ff0040, -56px -315.6666666667px #00ffc8, -130px -136.6666666667px #0011ff, 154px -313.6666666667px #ee00ff, 150px 23.3333333333px #5eff00, -188px -283.6666666667px #ff008c, -56px -26.6666666667px #00ffea, 187px -264.6666666667px #aaff00, 193px -162.6666666667px #ff0062, 193px -338.6666666667px #ffee00, -142px -83.6666666667px #00d9ff, -173px -171.6666666667px #ff4d00, -16px -35.6666666667px #008cff, 160px -66.6666666667px #ff00d5, -30px 61.3333333333px #c4ff00, 237px -208.6666666667px #ff00e6, 149px -108.6666666667px #ff9100, -161px -317.6666666667px #ffd000, -19px -177.6666666667px #0080ff, -112px -277.6666666667px #ffaa00, 157px -54.6666666667px fuchsia, 106px -206.6666666667px #e600ff, 76px -160.6666666667px #c800ff, -114px -323.6666666667px #ffbf00, 87px -165.6666666667px #2200ff, -134px -284.6666666667px #ff0088, 108px -0.6666666667px #ff0088, -201px -334.6666666667px #51ff00, -77px -99.6666666667px #b3ff00, 149px -356.6666666667px #f7ff00, -157px -341.6666666667px #00f2ff, -208px -63.6666666667px #00ff66, -182px -66.6666666667px #ae00ff, 30px -242.6666666667px #00ff09, -136px -39.6666666667px #00ff4d, 244px 23.3333333333px #ffe600, -192px -401.6666666667px #1500ff, 9px -357.6666666667px #ff003c, 235px -189.6666666667px #ff0077, -248px -222.6666666667px #88ff00, 31px -191.6666666667px #006aff, -27px -283.6666666667px #d000ff, 189px -7.6666666667px #fbff00, 108px -123.6666666667px #00ffbf, 79px -360.6666666667px #55ff00, -223px -345.6666666667px fuchsia;
    }
}
@keyframes bang {
    to {
        box-shadow: -189px -69.6666666667px #ff007b, -144px -23.6666666667px #c400ff, 5px -125.6666666667px aqua, -130px -97.6666666667px #00ff5e, -8px -103.6666666667px #00fffb, 195px -401.6666666667px #ff0040, -56px -315.6666666667px #00ffc8, -130px -136.6666666667px #0011ff, 154px -313.6666666667px #ee00ff, 150px 23.3333333333px #5eff00, -188px -283.6666666667px #ff008c, -56px -26.6666666667px #00ffea, 187px -264.6666666667px #aaff00, 193px -162.6666666667px #ff0062, 193px -338.6666666667px #ffee00, -142px -83.6666666667px #00d9ff, -173px -171.6666666667px #ff4d00, -16px -35.6666666667px #008cff, 160px -66.6666666667px #ff00d5, -30px 61.3333333333px #c4ff00, 237px -208.6666666667px #ff00e6, 149px -108.6666666667px #ff9100, -161px -317.6666666667px #ffd000, -19px -177.6666666667px #0080ff, -112px -277.6666666667px #ffaa00, 157px -54.6666666667px fuchsia, 106px -206.6666666667px #e600ff, 76px -160.6666666667px #c800ff, -114px -323.6666666667px #ffbf00, 87px -165.6666666667px #2200ff, -134px -284.6666666667px #ff0088, 108px -0.6666666667px #ff0088, -201px -334.6666666667px #51ff00, -77px -99.6666666667px #b3ff00, 149px -356.6666666667px #f7ff00, -157px -341.6666666667px #00f2ff, -208px -63.6666666667px #00ff66, -182px -66.6666666667px #ae00ff, 30px -242.6666666667px #00ff09, -136px -39.6666666667px #00ff4d, 244px 23.3333333333px #ffe600, -192px -401.6666666667px #1500ff, 9px -357.6666666667px #ff003c, 235px -189.6666666667px #ff0077, -248px -222.6666666667px #88ff00, 31px -191.6666666667px #006aff, -27px -283.6666666667px #d000ff, 189px -7.6666666667px #fbff00, 108px -123.6666666667px #00ffbf, 79px -360.6666666667px #55ff00, -223px -345.6666666667px fuchsia;
    }
}
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
beautify
beautify
您阅读这篇文章共花了：
Invitation
USTC-茶糜花开
FeynmanDirac
created:12/03/2022
Welcome to USTC-茶糜花开

This is an identification card as an honored membership of FeynmanDirac

Happy to see you follow FeynmanDirac, enjoy science together

© 版权声明
视觉美化
链接：传送门
作者
USTC-茶糜花开
创作于
2022-03-03
更新于
2022-05-05
许可协议
CC BY-NC-SA 4.0
免责声明 1 小站名称：USTC-茶糜花开
2 小站网址：https://blog.starysky.top
3 除标注`转载`字样的文章外，小站所发布的文章由小U均由撰写，仅供学习参考，我们尽最大能力保障文章内容的准确性和科学性
4 小站所转载的文章的内容与观点，不代表`USTC-茶糜花开`的立场，文章所有权归属作者所有
5 小站将在《中华人民共和国网络安全法》、《中华人民共和国计算机信息系统安全保护条例》等法律法规的框架下依法依规运行
7 本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于任何未授权用途
验证码启动中...