HTML&CSS ：如何让图片边框 “动” 起来？

七夏（UID：1） · 发表于 2025-2-12 11:13:41

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

这段代码创建了一个带有动态边框效果的图片展示，通过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>
        html,
        body {
            height: 100%;
        }

        body {
            position: relative;
            background-color: #0f222b;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .codepad-logo,
        .codepad-logo::before,
        .codepad-logo::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .codepad-logo {
            width: 200px;
            height: 200px;
            margin: auto;
            color: #3498db;
            border-radius: 6px;
            box-shadow: inset 0001px#3498db;
        }
        .codepad-logoimg{
            width: 100%;
            height: 100%;
            padding: 6px;
            border-radius: 8px;
            object-fit: cover;
        }

        .codepad-logo::before,
        .codepad-logo::after {
            content: '';
            z-index: -1;
            margin: -5%;
            box-shadow: inset 0002px;
            border-radius: 6px;
            animation: clipIt 8s linear infinite;
        }

        .codepad-logo::before {
            animation-delay: -4s;
        }

        @keyframes clipIt {

            0%,
            100% {
                clip: rect(0px, 220px, 2px, 0px);
            }

            25% {
                clip: rect(0px, 2px, 220px, 0px);
            }

            50% {
                clip: rect(218px, 220px, 220px, 0px);
            }

            75% {
                clip: rect(0px, 220px, 220px, 218px);
            }
        }
    </style>
</head>

<body>
    <div class="codepad-logo">
        <img src="../微信图片_20250211143125.jpg" alt="">
    </div>
</body>

</html>

HTML 结构

codepad-logo: 创建一个类名为“codepad-logo”的div元素，用于包含图片。
img: 显示图片，图片的src属性指向一个本地图片路径。

CSS 样式

html, body: 设置页面的高度和背景色。
body: 设置页面的位置和背景色。
*, *::before, *::after: 重置所有元素的box-sizing属性为border-box。
.codepad-logo: 设置图片容器的样式，包括宽度、高度、边距、颜色、圆角和边框。
.codepad-logo img: 设置图片的样式，包括宽度、高度、内边距、圆角和图片填充方式。
.codepad-logo::before, .codepad-logo::after: 设置图片容器的伪元素，用于创建动态边框效果。
@keyframes clipIt: 定义动态边框的动画效果，通过clip属性实现边框的动态变化。

HTML&CSS ：如何让图片边框 “动” 起来？

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

演示效果

HTML&CSS

HTML 结构

CSS 样式

相关帖子

快速回帖

分享帝

龙年限定

蛇年限定

关于楼主

商务推广