官僚作风是一门使可能变成不可能的艺术。——萨尔塞多
分享一个炫酷头像效果：
从b站渡一教育的一个视频看到的（不是推广，只是注明出处）
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
| <style>
img {
--s: 280px;
--c1: #c02942;
--c2: #ecd078;
--b: 5px;
--f: 1;
--bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%;
--shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
width: var(--s);
height: var(--s);
cursor: pointer;
transition: 0.5s;
padding-top: 100px;
outline: var(--b) solid var(--c1);
outline-offset: var(--shrink);
border-radius: 0 0 999px 999px;
transform: scale(var(--f));
background: radial-gradient(
circle closest-side,
var(--c2) calc(99% - var(--b)),
var(--c1) calc(100% - var(--b)),
var(--c1) 99%,
transparent 100%
)
var(--bgOption);
mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) /
calc(100% / var(--f) - 2 * var(--b)) 50%,
radial-gradient(circle closest-side, #000 99%, transparent)
var(--bgOption);
}
img:hover {
--f: 1.35;
}
</style>
<div class="avatar">
<img src="img/head.png" />
</div>
|
觉得挺有意思，就写着玩了玩儿，可以看我现在头像的样子