闲来无事逛稀土掘金，发现一个不错的创意
反正我摸鱼也无聊，所以也去造个轮子打发时间
我先不看这位爷怎么实现的，我自己试试能不能搞出来
预览
点击 简易大眼睛 预览
点击 卢恩符文大眼睛 预览
省去了原博客里面的很多特效，我做完了一看他的实现过程，居然用到了ECharts，果然我对Echarts还是不熟悉
源码
简易大眼睛
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--color-1: #01fd9cee;
}
* {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
height: 100vh;
background-color: black;
perspective: 500px;
transform-style: preserve-3d;
}
@keyframes wrapperBreathe {
0% {
scale: 1;
}
50% {
scale: 1.04;
}
100% {
scale: 1;
}
}
#wrapper {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 300px;
height: 300px;
border: 8px solid var(--color-1);
border-radius: 50%;
perspective: 500px;
transform-style: preserve-3d;
animation: wrapperBreathe 2s ease-out 0s infinite;
box-shadow: 0 0 18px 0 var(--color-1) inset;
}
@keyframes innerRotate {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 20%;
height: 20%;
border: 4px solid var(--color-1);
border-style: dashed;
border-radius: 50%;
transform: translateZ(50px);
animation: innerRotate 5s linear 0s infinite;
}
#inner>.aperture {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 8px;
height: 8px;
border: 2px solid var(--color-1);
border-radius: 50%;
box-shadow: 0 0 18px 2px var(--color-1);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
<div class="aperture"></div>
</div>
</div>
<script>
const $body = document.body;
const $wrapper = document.getElementById('wrapper');
const $inner = document.getElementById('inner');
const { clientWidth, clientHeight } = $body;
const centerPoint = {
x: clientWidth / 2,
y: clientHeight / 2
}
const maxDeg = 45;
const maxScale = .5;
$body.onmousemove = ev => {
const { clientX, clientY } = ev;
const percent = {
x: (clientX - centerPoint.x) / centerPoint.x,
y: (clientY - centerPoint.y) / centerPoint.y
}
$wrapper.style.transform = `rotateX(${-maxDeg * percent.y}deg) rotateY(${maxDeg * percent.x}deg)`;
$inner.style.scale = (2 - Math.abs(percent.y) - Math.abs(percent.x)) * maxScale + 1;
}
</script>
</body>
</html>
|
卢恩符文大眼睛
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--color-1: #01fd9c;
}
* {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
height: 100vh;
background-color: black;
perspective: 500px;
transform-style: preserve-3d;
}
@keyframes wrapperBreathe {
0% {
scale: 1;
}
50% {
scale: 1.04;
}
100% {
scale: 1;
}
}
#wrapper {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 300px;
height: 300px;
border: 8px solid var(--color-1);
border-radius: 50%;
perspective: 500px;
transform-style: preserve-3d;
animation: wrapperBreathe 2s ease-out 0s infinite;
box-shadow: 0 0 18px 0 var(--color-1) inset;
}
@keyframes innerRotate {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 27%;
height: 27%;
border-radius: 50%;
transform: translateZ(50px);
animation: innerRotate 8s linear 0s infinite;
}
#inner>.aperture {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 8px;
height: 8px;
border: 2px solid var(--color-1);
border-radius: 50%;
box-shadow: 0 0 18px 2px var(--color-1);
}
#inner>span {
position: absolute;
transform-origin: center bottom;
color: var(--color-1);
font-size: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
<div class="aperture"></div>
</div>
</div>
<script>
const $body = document.body;
const $wrapper = document.getElementById('wrapper');
const $inner = document.getElementById('inner');
const { clientWidth, clientHeight } = $body;
const centerPoint = {
x: clientWidth / 2,
y: clientHeight / 2
}
const maxDeg = 45;
const maxScale = .5;
$body.onmousemove = ev => {
const { clientX, clientY } = ev;
const percent = {
x: (clientX - centerPoint.x) / centerPoint.x,
y: (clientY - centerPoint.y) / centerPoint.y
}
$wrapper.style.transform = `rotateX(${-maxDeg * percent.y}deg) rotateY(${maxDeg * percent.x}deg)`;
$inner.style.scale = (2 - Math.abs(percent.y) - Math.abs(percent.x)) * maxScale + 1;
}
const _letters = 'ᚠᚡᚢᚣᚤᚥᚦᚧᚨᚩᚪᚫᚬᚭᚮᚯᚰᚱᚳᚴᚵᚶᚸᚹᚺᚻᚼᚽᚾᚿᛀᛂᛃᛄᛅᛆᛇᛈᛉᛊᛋᛍᛎᛏᛐᛑᛒᛓᛔᛗᛘᛙᛚᛛᛜᛝᛞᛟᛠᛡᛢᛣᛤᛥᛦᛧᛨᛩᛪ᛫ᛮᛯᛰ';
const letters = _letters.substr(0, 30);
const letterUnitDeg = 360 / letters.length;
const $fragment = document.createDocumentFragment();
for (let i in letters) {
let letter = letters[i];
let $span = document.createElement('span');
$span.innerText = letter;
$span.style.rotate = `${i * letterUnitDeg}deg`;
$span.style.height = `${$inner.clientHeight / 2}px`;
$span.style.translate = `calc(${$inner.clientWidth / 2}px - 50%)`;
$fragment.append($span);
}
$inner.append($fragment);
const $letterArr = Array.from($inner.querySelectorAll('span'));
const flicker = () => {
let index = Math.floor(Math.random() * letters.length);
let $span = $letterArr[index];
$span.innerText = _letters[Math.floor(Math.random() * _letters.length)];
setTimeout(() => {
requestAnimationFrame(flicker);
}, 50)
}
flicker();
</script>
</body>
</html>
|
