HTML&CSS：用户体验必备！表情包结果反馈卡片

这段HTML和CSS代码实现了一个具有动态动画效果的成功和错误提示框，每个提示框包含一个表情图标、提示信息和一个按钮。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Lato:400,700");

        html {
            display: grid;
            min-height: 100%;
        }

        body {
            display: grid;
            overflow: hidden;
            font-family: "Lato", sans-serif;
            text-transform: uppercase;
            text-align: center;
        }

        #container {
            position: relative;
            margin: auto;
            overflow: hidden;
            width: 700px;
            height: 250px;
        }

        h1 {
            font-size: 0.9em;
            font-weight: 100;
            letter-spacing: 3px;
            padding-top: 5px;
            color: #FCFCFC;
            padding-bottom: 5px;
            text-transform: uppercase;
        }

        .green {
            color: #4ec07d;
        }

        .red {
            color: #e96075;
        }

        .alert {
            font-weight: 700;
            letter-spacing: 5px;
        }

        p {
            margin-top: -5px;
            font-size: 0.5em;
            font-weight: 100;
            color: #5e5e5e;
            letter-spacing: 1px;
        }

        button,
        .dot {
            cursor: pointer;
        }

        #success-box {
            position: absolute;
            width: 35%;
            height: 100%;
            left: 12%;
            background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);
            border-radius: 20px;
            box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
            perspective: 40px;
        }

        #error-box {
            position: absolute;
            width: 35%;
            height: 100%;
            right: 12%;
            background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
            border-radius: 20px;
            box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
        }

        .dot {
            width: 8px;
            height: 8px;
            background: #FCFCFC;
            border-radius: 50%;
            position: absolute;
            top: 4%;
            right: 6%;
        }

        .dot:hover {
            background: #c9c9c9;
        }

        .two {
            right: 12%;
            opacity: 0.5;
        }

        .face {
            position: absolute;
            width: 22%;
            height: 22%;
            background: #FCFCFC;
            border-radius: 50%;
            border: 1px solid #777777;
            top: 21%;
            left: 37.5%;
            z-index: 2;
            animation: bounce 1s ease-in infinite;
        }

        .face2 {
            position: absolute;
            width: 22%;
            height: 22%;
            background: #FCFCFC;
            border-radius: 50%;
            border: 1px solid #777777;
            top: 21%;
            left: 37.5%;
            z-index: 2;
            animation: roll 3s ease-in-out infinite;
        }

        .eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #777777;
            border-radius: 50%;
            top: 40%;
            left: 20%;
        }

        .right {
            left: 68%;
        }

        .mouth {
            position: absolute;
            top: 43%;
            left: 41%;
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .happy {
            border: 2px solid;
            border-color: transparent #777777 #777777 transparent;
            transform: rotate(45deg);
        }

        .sad {
            top: 49%;
            border: 2px solid;
            border-color: #777777 transparent transparent #777777;
            transform: rotate(45deg);
        }

        .shadow {
            position: absolute;
            width: 21%;
            height: 3%;
            opacity: 0.5;
            background: #777777;
            left: 40%;
            top: 43%;
            border-radius: 50%;
            z-index: 1;
        }

        .scale {
            animation: scale 1s ease-in infinite;
        }

        .move {
            animation: move 3s ease-in-out infinite;
        }

        .message {
            position: absolute;
            width: 100%;
            text-align: center;
            height: 40%;
            top: 47%;
        }

        .button-box {
            position: absolute;
            background: #FCFCFC;
            width: 50%;
            height: 15%;
            border-radius: 20px;
            top: 73%;
            left: 25%;
            outline: 0;
            border: none;
            box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
            transition: all 0.5s ease-in-out;
        }

        .button-box:hover {
            background: #efefef;
            transform: scale(1.05);
            transition: all 0.3s ease-in-out;
        }

        @keyframes bounce {
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes scale {
            50% {
                transform: scale(0.9);
            }
        }

        @keyframes roll {
            0% {
                transform: rotate(0deg);
                left: 25%;
            }

            50% {
                left: 60%;
                transform: rotate(168deg);
            }

            100% {
                transform: rotate(0deg);
                left: 25%;
            }
        }

        @keyframes move {
            0% {
                left: 25%;
            }

            50% {
                left: 60%;
            }

            100% {
                left: 25%;
            }
        }

        footer {
            position: absolute;
            bottom: 0;
            right: 0;
            text-align: center;
            font-size: 1em;
            text-transform: uppercase;
            padding: 10px;
            font-family: "Lato", sans-serif;
        }

        footer p {
            color: #EF8D9C;
            letter-spacing: 2px;
        }

        footer a {
            color: #B0DB7D;
            text-decoration: none;
        }

        footer a:hover {
            color: #FFC39E;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="success-box">
            <div class="dot"></div>
            <div class="dot two"></div>
            <div class="face">
                <div class="eye"></div>
                <div class="eye right"></div>
                <div class="mouth happy"></div>
            </div>
            <div class="shadow scale"></div>
            <div class="message">
                <h1 class="alert">Success!</h1>
                <p>yay, everything is working.</p>
            </div>
            <button class="button-box">
                <h1 class="green">continue</h1>
            </button>
        </div>
        <div id="error-box">
            <div class="dot"></div>
            <div class="dot two"></div>
            <div class="face2">
                <div class="eye"></div>
                <div class="eye right"></div>
                <div class="mouth sad"></div>
            </div>
            <div class="shadow move"></div>
            <div class="message">
                <h1 class="alert">Error!</h1>
                <p>oh no, something went wrong.
            </div>
            <button class="button-box">
                <h1 class="red">try again</h1>
            </button>
        </div>
    </div>
</body>

</html>

HTML 结构

container：定义整个页面的容器，包含成功和错误的提示框。
success-box：定义成功提示框的样式，包含动画效果和成功信息。
error-box：定义错误提示框的样式，包含动画效果和错误信息。
dot：定义小圆点的样式，用于装饰。
face：定义成功提示框中的笑脸。
face2：定义错误提示框中的哭脸。
eye：定义眼睛的样式。
mouth：定义嘴巴的样式，包括笑脸和哭脸的嘴巴。
shadow：定义阴影的样式，用于增强立体感。
message：定义提示信息的样式，包含标题和描述。
button-box：定义按钮的样式，用于用户交互。

CSS 样式

html：定义页面的整体布局，使用grid布局确保内容居中显示。
body：定义页面的字体、文本对齐方式和文本转换效果。
#container：定义容器的样式，包括相对定位、外边距、宽度和高度。
h1：定义标题的样式，包括字体大小、字体粗细、字母间距和颜色。
.green：定义绿色文本的样式。
.red：定义红色文本的样式。
.alert：定义警告文本的样式，包括字体粗细和字母间距。
p：定义段落的样式，包括字体大小、字体粗细和颜色。
button, .dot：定义按钮和小圆点的样式，包括光标样式。
#success-box：定义成功提示框的样式，包括绝对定位、宽度、高度、背景渐变和圆角。
#error-box：定义错误提示框的样式，包括绝对定位、宽度、高度、背景渐变和圆角。
.dot：定义小圆点的样式，包括宽度、高度、背景颜色、圆角和位置。
.dot:hover：定义小圆点鼠标悬停时的样式，包括背景颜色变化。
.two：定义第二个小圆点的样式，包括位置和透明度。
.face：定义笑脸的样式，包括绝对定位、宽度、高度、背景颜色、圆角和边框。
.face2：定义哭脸的样式，包括绝对定位、宽度、高度、背景颜色、圆角和边框。
.eye：定义眼睛的样式，包括宽度、高度、背景颜色、圆角和位置。
.right：定义右边眼睛的样式，包括位置。
.mouth：定义嘴巴的样式，包括宽度、高度、圆角和边框。
.happy：定义笑脸嘴巴的样式，包括边框和旋转效果。
.sad：定义哭脸嘴巴的样式，包括边框和旋转效果。
.shadow：定义阴影的样式，包括宽度、高度、透明度、背景颜色、圆角和位置。
.scale：定义缩放动画的样式。
.move：定义移动动画的样式。
.message：定义提示信息的样式，包括绝对定位、宽度、文本对齐方式和高度。
.button-box：定义按钮的样式，包括绝对定位、背景颜色、宽度、高度、圆角、边框和阴影。
.button-box:hover：定义按钮鼠标悬停时的样式，包括背景颜色变化和缩放效果。
@keyframes bounce：定义弹跳动画。
@keyframes scale：定义缩放动画。
@keyframes roll：定义旋转动画。
@keyframes move：定义移动动画。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！