HTML&CSS ：如何让图片边框 “动” 起来？
<p>这段代码创建了一个带有动态边框效果的图片展示，通过CSS技术实现了边框的动态变化效果，为页面添加了视觉吸引力</p><hr />
<h2>演示效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/vAEun6t7Od86icFRZz6X61FfIQiaib5LV4qVjqBhJavQgpPV69O2o6IWu8sCoDs1oyEEOCkib7Tenn2pCicmUianrHlA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>HTML&CSS</h2>
<pre><code><!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>
</code></pre>
<h2>HTML 结构</h2>
<ul>
<li>codepad-logo: 创建一个类名为“codepad-logo”的div元素，用于包含图片。</li>
<li>img: 显示图片，图片的src属性指向一个本地图片路径。</li>
</ul>
<h2>CSS 样式</h2>
<ul>
<li>html, body: 设置页面的高度和背景色。</li>
<li>body: 设置页面的位置和背景色。</li>
<li>*, *::before, *::after: 重置所有元素的box-sizing属性为border-box。</li>
<li>.codepad-logo: 设置图片容器的样式，包括宽度、高度、边距、颜色、圆角和边框。</li>
<li>.codepad-logo img: 设置图片的样式，包括宽度、高度、内边距、圆角和图片填充方式。</li>
<li>.codepad-logo::before, .codepad-logo::after: 设置图片容器的伪元素，用于创建动态边框效果。</li>
<li>@keyframes clipIt: 定义动态边框的动画效果，通过clip属性实现边框的动态变化。</li>
</ul>
页:
[1]