收集了一些比较好看的栗子

栗一
圆

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
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: black;
        }
        
        .main {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .ring {
            width: 300px;
            height: 300px;
            background: linear-gradient(#3498db, transparent 40%);
            border-radius: 50%;
            animation: roll 1s linear infinite;
        }
        
        @keyframes roll {
            100% {
                transform: rotateZ(360deg);
                filter: hue-rotate(360deg);
            }
        }
        
        .ring::before {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: black;
            border-radius: 50%;
        }
        
        .ring::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(#3498db, transparent 40%);
            border-radius: 50%;
            z-index: -1;
            filter: blur(50px);
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="ring"></div>
    </div>
</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
<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            /* 弹性布局 让元素在页面中垂直+水平居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 让页面占浏览器可视区域的高度 */
            height: 100vh;
            background-color: pink;
        }
        
        .container .ghost {
            position: relative;
            width: 150px;
            height: 225px;
            border-radius: 75px 75px 0 0;
            background-color: #fff;
            box-shadow: -10px 0 0 #dbdbdb inset, 0 0 50px #5939db;
            animation: ghost 2s infinite;
        }
        /* 眼睛 start */
        
        .container .ghost .ghostEyes {
            display: flex;
            /* 元素平均分配宽度 */
            justify-content: space-around;
            width: 90px;
            padding-top: 70px;
            margin: 0 auto;
        }
        /* 利用伪元素做出眼睛 */
        
        .container .ghost .ghostEyes::before,
        .container .ghost .ghostEyes::after {
            content: '';
            width: 15px;
            height: 25px;
            border-radius: 50%;
            background-color: #5939db;
        }
        /* 眼睛 end */
        /* 腮红 start */
        
        .container .ghost .ghostDimples {
            display: flex;
            justify-content: space-around;
            width: 130px;
            padding-top: 15px;
            margin: 0 auto;
        }
        
        .container .ghost .ghostDimples::before,
        .container .ghost .ghostDimples::after {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #ffbeff;
        }
        /* 腮红 end */
        /* 脚 start */
        
        .container .ghost .ghostFeet {
            /* 让四只脚水平排列 */
            display: flex;
            position: absolute;
            bottom: -13px;
            width: 100%;
        }
        
        .container .ghost .ghostFeet .ghostFoot {
            width: 25%;
            height: 26px;
            border-radius: 50%;
            background-color: #fff;
        }
        /* 设置最后一个脚跟身体阴影相同 */
        
        .container .ghost .ghostFeet .ghostFoot:last-child {
            /* 利用背景渐变色实现 */
            background-image: linear-gradient(to right, #fff 73%, #dbdbdb 45%);
        }
        /* 脚 end */
        /* 阴影 start */
        
        .container .shadow {
            width: 150px;
            height: 40px;
            margin-top: 50px;
            border-radius: 50%;
            background-color: #000232;
            animation: shadow 2s infinite;
        }
        /* 阴影 end */
        /* 动画 */
        
        @keyframes ghost {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px);
            }
        }
        
        @keyframes shadow {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                /* 缩放 */
                transform: scale(0.9);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ghost">
            <div class="ghostEyes"></div>
            <div class="ghostDimples"></div>
            <div class="ghostFeet">
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
                <div class="ghostFoot"></div>
            </div>
        </div>
        <div class="shadow"></div>
    </div>
</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
<!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>水珠</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(45deg, pink, hotpink);
        }
        
        body::before {
            width: 50vmin;
            height: 50vmin;
            content: "";
            background-image: linear-gradient(135deg, slateblue, HotPink);
            border-radius: 30vmin 70vmin 53vmin 47vmin / 26vmin 46vmin 54vmin 74vmin;
            box-shadow: 0 -2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset, 0 -2vmin 7vmin purple inset;
            animation: anim 30s infinite;
            display: inline-block;
            filter: drop-shadow(0 0 3vmin Thistle) drop-shadow(0 5vmin 4vmin Orchid) drop-shadow(2vmin -2vmin 15vmin MediumSlateBlue) drop-shadow(0 0 7vmin MediumOrchid);
            position: relative;
            top: 0;
        }
        
        @keyframes anim {
            0%,
            100% {
                border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
                box-shadow: 0 -2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset, 0 -2vmin 7vmin purple inset;
            }
            10% {
                border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
            }
            20% {
                border-radius: 67% 33% 47% 53% / 37% 20% 80% 63%;
            }
            30% {
                border-radius: 39% 61% 47% 53% / 37% 40% 60% 63%;
                box-shadow: -1vmin -2vmin 3vmin LightPink inset, -1vmin -2vmin 4vmin MediumPurple inset, 1vmin -1vmin 7vmin purple inset;
            }
            40% {
                border-radius: 39% 61% 82% 18% / 74% 40% 60% 26%;
            }
            50% {
                border-radius: 100%;
                box-shadow: 0 2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset, 0 2vmin 7vmin purple inset;
            }
            60% {
                border-radius: 50% 50% 53% 47% / 72% 69% 31% 28%;
            }
            70% {
                border-radius: 50% 50% 53% 47% / 26% 22% 78% 74%;
                box-shadow: 1vmin 1vmin 4vmin LightPink inset, 2vmin -1vmin 4vmin MediumPurple inset, -1vmin -1vmin 5vmin purple inset;
            }
            80% {
                border-radius: 50% 50% 53% 47% / 26% 69% 31% 74%;
            }
            90% {
                border-radius: 20% 80% 20% 80% / 20% 80% 20% 80%;
            }
        }
    </style>
</head>

<body>

</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
<!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 {
            --fontColor: #ffc0cb;
            --one1: #bd7be8;
            --one2: #8063e1;
            --two1: #7f94fc;
            --two2: #3f58e3;
            --three1: #21bbfe;
            --three2: #2c6fd1;
            --four1: #415197;
            --four2: #352f64;
            --levelShadow: #22325480;
        }
        
        .levels {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -140px;
            margin-top: -90px;
            transform-style: preserve-3d;
            user-select: none;
        }
        
        .levels .level {
            width: 280px;
            height: 140px;
            border-radius: 12px;
            color: var(--fontColor);
            cursor: pointer;
            transition: all 0.4s ease;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
            opacity: 0.9;
            margin-top: -70px;
        }
        
        .levels .level.one {
            background: linear-gradient(135deg, var(--one1), var(--one2));
            box-shadow: 20px 20px 60px var(--levelShadow), 1px 1px 0px 1px var(--one2);
            z-index: 4;
        }
        
        .levels .level.two {
            background: linear-gradient(135deg, var(--two1), var(--two2));
            box-shadow: 20px 20px 60px var(--levelShadow), 1px 1px 0px 1px var(--two2);
            z-index: 3;
        }
        
        .levels .level.three {
            background-image: linear-gradient(135deg, var(--three1), var(--three2));
            box-shadow: 20px 20px 60px var(--levelShadow), 1px 1px 0px 1px var(--three2);
            z-index: 2;
        }
        
        .levels .level.four {
            background-image: linear-gradient(135deg, var(--four1), var(--four2));
            box-shadow: 20px 20px 60px var(--levelShadow), 1px 1px 0px 1px var(--four2);
            z-index: 1;
        }
        
        .levels .level .title {
            position: absolute;
            top: 28px;
            left: 15px;
            font-size: 26px;
            font-weight: bold;
        }
        
        .levels .level .content {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 16px;
        }
        
        .levels .level:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
            opacity: 0.6;
        }
        
        .levels .level:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
        }
        
        .levels .level::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
        }
    </style>
</head>

<body>
    <div class="levels">
        <div class="level one">
            <div class="title">One</div>
            <div class="content">One Content</div>
        </div>
        <div class="level two">
            <div class="title">Two</div>
            <div class="content">Two Content</div>
        </div>
        <div class="level three">
            <div class="title">Three</div>
            <div class="content">Three Content</div>
        </div>
        <div class="level four">
            <div class="title">Four</div>
            <div class="content">Four Content</div>
        </div>
    </div>

</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
<!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>随机点名</title>
    <style>
        /* 初始化页面，清除所有元素的内外边距 */
        
        * {
            padding: 0;
            margin: 0;
            /* 设置背景颜色为414141 */
            background-color: #414141;
        }
        /* 盒子居中 */
        
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        /* 使用上期视频的文字渐变效果，再加一点点文字阴影 */
        
        span,
        h2 {
            text-shadow: 0 0 10px #dfd8d8;
            background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: ff 0.9s linear infinite;
        }
        
        @keyframes ff {
            to {
                filter: hue-rotate(360deg);
            }
        }
        /* 设置一下字体大小 */
        
        h2 {
            font-size: 72px;
        }
        
        span {
            font-size: 46px;
        }
        /* 按钮居中 */
        
        button {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 25px;
            box-shadow: 0 0 10px #fff;
            /* 取消轮廓线 */
            outline: none;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div>
        <h2>随机点名</h2>
        <span id="name"></span>
    </div>
    <button id="button_text">stop</button>


    <script>
        // 获取标签

        let nametxt = document.getElementById('name');
        let button = document.getElementById('button_text');
        // 创建一个数组存储名字

        let uname = ['小', '幻', '郑', '朕', '晓', '萧',
            '双', '梦', '霜', '影', '逐', '千', '城', '仞',
            '春', '夏', '雪', '秋', '冬', '的', '少', '年', '从', '前', '希', '欢', '喜',
            '天', '回', '清', '下', '白', '月', '暗', '光'
        ];
        // 创建一个函数生成随机数字

        function getrandom(min, max) {
            return Math.floor(Math.random() * (max - min - 1) + min);
        }

        function clock() {
            // 通过获取一个随机的数组下标实现随机获取一个名字，并将这个名字赋值给变量random

            let random = uname[getrandom(0, uname.length - 1)];
            //将random塞到span里

            nametxt.innerHTML = random;
        };
        // 打印名字已经实现了，下一步让没点击按钮前名字一直刷新

        // 设置不停止时名字的刷新速度为30毫秒

        let time = self.setInterval("clock()", 100);
        // 将开始与停止按钮绑定到按钮上，并通过按钮控制

        let flag = false;
        button.onclick = function() {
            // 当flag标志为false时，点击按钮让刷新停止；

            if (flag == false) {
                time = window.clearInterval(time);
                // 按钮文字从stop变为start；

                button.innerHTML = 'start';
                // 标志变更

                flag = true;
            } else {
                // 当flag标志为true时，开始刷新，文字变更

                time = self.setInterval("clock()", 100);
                button.innerHTML = 'stop';
                flag = false;
            }
        }
    </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
    <!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>开！</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            background-color: rgb(119 157 193);
        }
        
        .a {
            position: relative;
            top: 100px;
            width: 1000px;
            height: 600px;
            background-image: url("00.jpg");
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .b,
        .c,
        .d,
        .e {
            position: absolute;
            width: 1000px;
            height: 600px;
            /* 设置阴影 */
            filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, .5));
            background-size: cover;
            opacity: .7;
            transition: .5s;
        }
        
        .b::after,
        .c::after,
        .d::after,
        .e::after {
            content: "";
            position: absolute;
            width: 1000px;
            height: 600px;
            background-image: url("00.jpg");
        }
        
        .b {
            left: -400px;
            transform: rotateZ(100deg);
            overflow: hidden;
        }
        
        .b::after {
            transform: rotateZ(-100deg);
        }
        
        .c {
            left: -400px;
            transform: rotateZ(-100deg);
            overflow: hidden;
        }
        
        .c::after {
            transform: rotateZ(100deg);
        }
        
        .d {
            right: -400px;
            transform: rotateZ(105deg);
            overflow: hidden;
        }
        
        .d::after {
            transform: rotateZ(-105deg);
        }
        
        .e {
            right: -400px;
            transform: rotateZ(-100deg);
            overflow: hidden;
        }
        
        .e::after {
            transform: rotateZ(100deg);
        }
        
        .f {
            opacity: 0;
            font: 900 50px '';
            /* 设置字体间距 */
            letter-spacing: 10px;
            color: rgb(60, 60, 70);
            transition: .5s;
        }
        /* 设置动画 */
        
        .a:hover .b {
            left: -550px;
        }
        
        .a:hover .c {
            left: -600px;
        }
        
        .a:hover .d {
            right: -550px;
        }
        
        .a:hover .e {
            right: -610px;
        }
        
        .a:hover .f {
            opacity: 1;
        }
    </style>
</head>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <p class="f">吓你一跳</p>
</div>

<body>

</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
<!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>藏</title>
    <style>
        body {
            background-color: rgb(60, 60, 70);
            display: flex;
            justify-content: center;
        }
        
        .a {
            position: relative;
            top: 250px;
            width: 300px;
            display: flex;
            justify-content: center;
            margin: 0 30px;
        }
        
        .c,
        .b {
            font: 900 100px '';
            line-height: 150px;
            position: absolute;
            color: brown;
            top: 0;
            /* 使文字上下移动时有0.4s的过渡效果 */
            transition: .4s;
        }
        
        .c {
            /* 裁剪文字的上半部分，括号里的四个值分别是
            top，right，bottom，left */
            clip-path: inset(49% 0 0 0);
        }
        
        .b {
            /* 裁剪文字的下半部分 */
            clip-path: inset(1% 0 50% 0);
        }
        
        .a:hover .b,
        .a:hover .c {
            /* 让--i为30的向上移动30px，-30的向下移动30px
            这样子就能空出60px留给中间的超链接 */
            top: calc(var(--i)*1px);
        }
        
        .a:hover .d {
            opacity: 1;
        }
        
        .d {
            text-decoration: none;
            color: cyan;
            font: 600 30px '';
            line-height: 150px;
            opacity: 0;
            transition: .3s;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b" style="--i:-30">xiao</div>
        <div class="c" style="--i:30">xiao</div>
        <a href="#" class="d">被</a>
    </div>
    <div class="a">
        <div class="b" style="--i:-30">哦吼</div>
        <div class="c" style="--i:30">哦吼</div>
        <a href="#" class="d">发现</a>
    </div>
    <div class="a">
        <div class="b" style="--i:-30">shuang</div>
        <div class="c" style="--i:30">shuang</div>
        <a href="#" class="d">了</a>
    </div>
</body>

</html>