机器人，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

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器人表情动画</title>
    <style>
        /* 全局页面样式 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 机器人面部基础样式 */
        #robot-face {
            width: 100%;
            height: 100%;
            background-color: black;
            border-radius: 20px;
            position: relative;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        /* 眼睛通用样式 */
        .eye {
            width: 12%;
            height: 40%;
            background-color: white;
            border-radius: 150px;
            position: absolute;
            top: 30%;
            transition: all 0.8s ease;
        }

        /* 左眼位置 */
        #left-eye {
            left: 25%;
        }

        /* 右眼位置 */
        #right-eye {
            right: 25%;
        }

        /* 初始眨眼动画 */
        @keyframes blink {
            0%, 80%, 100% { 
                width: 12%;
                height: 40%;
                top: 30%;
            }
            98% { 
                width: 12%;
                height: 5%;
                top: 49%;
            }
        }

        /* 睡眠状态样式 */
        #robot-face.sleep .eye {
            animation: none !important;
            height: 5% !important;
            width: 18%;
            top: 49% !important;
            border-radius: 45px !important;
        }

        #robot-face.sleep #left-eye {
            left: 22% !important;
        }

        #robot-face.sleep #right-eye {
            right: 22% !important;
        }

        /* 过渡到睡眠的动画 */
        @keyframes toSleep {
            0% {
                height: 40%;
                top: 30%;
                border-radius: 150px;
            }
            100% {
                height: 2%;
                top: 40%;
                border-radius: 45px;
            }
        }

        .sleeping-transition .eye {
            animation: toSleep 1s forwards;
        }
    </style>
</head>
<body>
    <div id="robot-face">
        <div class="eye" id="left-eye"></div>
        <div class="eye" id="right-eye"></div>
    </div>

    <script>
        const robotFace = document.getElementById('robot-face');
        
        // 初始状态 - 眨眼
        function startBlinking() {
            document.querySelectorAll('.eye').forEach(eye => {
                eye.style.animation = 'blink 2s infinite';
            });
        }
        
        // 过渡到睡眠状态
        function transitionToSleep() {
            // 先停止眨眼
            document.querySelectorAll('.eye').forEach(eye => {
                eye.style.animation = 'none';
            });
            
            // 添加过渡动画
            robotFace.classList.add('sleeping-transition');
            
            // 过渡完成后设置为睡眠状态
            setTimeout(() => {
                robotFace.classList.add('sleep');
                robotFace.classList.remove('sleeping-transition');
            }, 2000);
        }
        
        // 自动播放动画序列
        function playAnimationSequence() {
            startBlinking();
            
            // 5秒后开始过渡到睡眠状态
            setTimeout(transitionToSleep, 2000);
        }
        
        // 页面加载后开始动画
        window.onload = playAnimationSequence;
    </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

            
            /* 全局页面样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 机器人面部基础样式 */
#robot-face {
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 眼睛通用样式 */
.eye {
    width: 12%;
    height: 40%;
    background-color: white;
    border-radius: 150px;
    position: absolute;
    top: 30%;
    animation: blink 2s infinite;
    transition: all 0.3s ease;
}

/* 右眼添加延迟使眨眼更自然 */
#right-eye {
    animation-delay: 0.01s;
}

/* 左眼位置 */
#left-eye {
    left: 25%;
}

/* 右眼位置 */
#right-eye {
    right: 25%;
}


/* 控制按钮容器样式 */
#controls {
    position: absolute;
    bottom: 5%;
    display: flex;
    gap: 10px;
}

/* 按钮基础样式 */
button {
    padding: 8px 15px;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover {
    background-color: #3a7bc8;
}

button:active {
    background-color: #2a6bb8;
}

/* 激活按钮样式 */
button.active {
    background-color: #2a6bb8;
    font-weight: bold;
}

/* 眨眼动画 */
@keyframes blink {
    0%, 80%, 100% { 
        width: 12%;
        height: 40%;
        top: 30%;
    }
    98% { 
        width: 12%;
        height: 2%;
        top: 49%;
        
    }
}

/* 睡眠状态样式 */
#robot-face.sleep .eye {
    animation: none !important;
    height: 5% !important;
    width: 18%;
    top: 40% !important;
    border-radius: 45px 45px 45px 45px !important;
    transition: all 0.8s ease;
}

#robot-face.sleep #left-eye {
    left: 20% !important;
    transition: all 0.8s ease;
}

#robot-face.sleep #right-eye {
    right: 20% !important;
    transition: all 0.8s ease;
}