HTML&CSS ：眨眼睛特效这段代码实现了一个动态的加载动画，模拟了一个眼睛的移动效果和一个旋转的圆形元素。大家复制

这段代码实现了一个动态的加载动画，模拟了一个眼睛的移动效果和一个旋转的圆形元素。

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

演示效果

HTML&CSS


<!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>
        body {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .loader {
            --eye: #212121;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loader::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border: 5px solid var(--eye);
            border-radius: 100%;
            animation: translate-keyframes 2s infinite linear;
        }

        .loader span {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            border-top: 12px solid var(--eye);
            border-bottom: 5px solid var(--eye);
            outline: 2px solid var(--eye);
        }

        .loader span {
            animation: rotate-keyframes 2s infinite linear;
        }

        @keyframes translate-keyframes {
            0% {
                transform: translate(-100%, -50%);
            }

            95% {
                transform: translate(50%, -50%);
            }

            96% {
                transform: translate(-50%, -50%);
            }

            100% {
                transform: translate(-100%, -50%);
            }
        }

        @keyframes rotate-keyframes {
            90% {
                height: 40px;
            }

            95% {
                height: 0px;
            }

            100% {
                height: 40px;
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <span></span>
    </div>
</body>

</html>

HTML 结构

loader：加载器的容器，包含一个span元素。
span：用于创建加载动画的核心元素。

CSS 样式

body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
.loader：定义加载器的布局方式，使其内容居中对齐。
.loader::before：创建一个绝对定位的圆形边框，用于模拟眼睛的移动效果。它通过translate-keyframes动画在水平方向上移动。
.loader span：定义span的样式，包括大小、圆角和边框。它通过rotate-keyframes动画实现旋转和高度变化的效果。
@keyframes translate-keyframes：定义水平移动的动画，使.loader::before在水平方向上循环移动。
@keyframes rotate-keyframes：定义旋转动画，使span在旋转过程中动态调整高度。

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