今天在 104 看到一個還滿有趣的效果 , 本來以為是有字的 「職涯」 沒想到是撒旦說的障眼法 XD
原理是利用 border-top border-left 等去加上框線 , 因為框線有兩邊所以要用 span-first-child & span:last-child 個別設定 , 接著利用 before 偽元素去繞著跑小方框 , 我自己稍微改造下變成圓球
另外小方框的動畫也滿特別的 , 要注意算下位置讓 0% - 100% 回到原點 , 25% - 75% 跑到中間 , 50% 則跑到下方
最後八卦到公司同事以前是友達低 , 就改成一個不錯的招募標語 XD
See the Pen
DBA by 喇賽人 (@weber87na)
on CodePen.
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
| <html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
color: #fff;
font-family: '微軟正黑體';
font-size: 72px;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.title {
position: relative;
}
.title span:first-child {
border-top: 3px solid white;
border-left: 3px solid white;
display: block;
position: absolute;
width: 30px;
height: 20px;
top: 5px;
left: -5px;
}
.title span:last-child {
border-bottom: 3px solid white;
border-right: 3px solid white;
display: block;
position: absolute;
width: 30px;
height: 20px;
bottom: 5px;
right: -5px;
}
.title span:first-child:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: red;
box-shadow: 0 0 5px 5px red,
inset 0 0 2px 2px red;
animation: 3s move linear infinite;
}
@keyframes move {
0%,
100% {
left: 24px;
top: -4px;
}
25%,
75% {
top: -4px;
left: -4px;
}
50% {
top: 14px;
left: -4px;
box-shadow: unset;
}
}
#lover {
color: pink;
text-decoration: line-through;
}
#dba{
color: red;
}
</style>
</head>
<body>
<p class="title">
<span></span>
友達 ◎ 以上 <span id="lover">戀人</span> <span id="dba">DBA</span> 未滿
<span></span>
</p>
</body>
</html>
|