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

22331144 · 发表于 2025-3-2 22:02:19

这段代码创建了一个带有动态边框效果的图片展示，通过CSS技术实现了边框的动态变化效果，为页面添加了视觉吸引力
演示效果

[HTML] 纯文本查看 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>x64论坛发布其他已授权</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>

wsasecy · 发表于 2025-3-18 09:44:59

我这连固定的图片边框都没有出现呀...代码全乎了没？

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

本帖子中包含更多资源

评分

灌水之王

最佳新人

活跃会员