好看的卡片动态渐变边框

七夏（UID：1） · 发表于 3 天前

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

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

×

这段代码通过 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: #212121;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 100px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0px15px;
background-color: red;
border-radius: 10px;
border: none;
color: white;
position: relative;
cursor: pointer;
font-weight: 900;
transition-duration: .2s;
background: linear-gradient(0deg, #000, #272727);
margin: 020px;
font-size: 24px;
}
.card:before,
.card:after {
content: '';
position: absolute;
left: -2px;
top: -2px;
border-radius: 10px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094,
#0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position: 00;
}
50% {
background-position: 400%0;
}
100% {
background-position: 00;
}
}
.card:after {
filter: blur(100px);
}
</style>
</head>
<body>
<div class="box">
<div class="card">你</div>
<div class="card">好</div>
<div class="card">吗</div>
</div>
</body>
</html>

复制代码

HTML 结构

box：一个容器，用于包含卡片元素.
card：每个 card 代表一个卡片，显示文本.

CSS 样式

body：设置页面的边距为 0，背景颜色为深灰色（#212121），使用 flex 布局使内容垂直和水平居中，页面高度为视口高度（100vh）.
.box：定义卡片的容器，使用 flex 布局使卡片居中显示.
.card：定义卡片的样式，包括尺寸、形状、颜色、字体等.width: 100px;和 height: 150px;：设置卡片的宽度和高度.display: flex; align-items: center; justify-content: center;：使用 flex 布局使卡片内的文本居中显示.background-color: red;：卡片的背景颜色为红色.border-radius: 10px;：卡片的圆角大小为 10 像素.color: white;：文本颜色为白色.position: relative;：相对定位，用于伪元素的绝对定位.cursor: pointer;：鼠标悬停时显示为指针，表示可点击.font-weight: 900;：字体粗细为 900，表示非常粗.transition-duration: .2s;：过渡效果持续时间为 0.2 秒.background: linear-gradient(0deg, #000, #272727);：卡片的渐变背景，从黑色到深灰色.margin: 0 20px;：卡片的左右外边距为 20 像素，使卡片之间有间隔.font-size: 24px;：文本字体大小为 24 像素.
.card:before 和.card:after 伪元素：用于创建卡片的动态背景效果.content: '';：创建一个空的内容.position: absolute;：绝对定位，相对于卡片.background: linear-gradient(45deg, ...);：定义了一个 45 度的线性渐变背景，颜色循环变化.background-size: 400%;：背景大小为卡片的 400%，使渐变效果更明显.width: calc(100% + 4px);和 height: calc(100% + 4px);：伪元素的宽度和高度比卡片大 4 像素，以覆盖卡片的边框.z-index: -1;：将伪元素放置在卡片的下方.animation: steam 20s linear infinite;：应用了一个名为 steam 的动画，使背景渐变在 20 秒内线性循环移动.
@keyframes steam：定义了动画的关键帧，使背景渐变在水平方向上移动.0% { background-position: 0 0; }：起始位置为背景的左上角.50% { background-position: 400% 0; }：中间位置为背景的右上角.100% { background-position: 0 0; }：结束位置回到背景的左上角.
.card:after 的 filter: blur(100px);：对背景进行模糊处理，增加视觉效果，使背景看起来更柔和.

好看的卡片动态渐变边框

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

相关帖子

快速回帖

分享帝

龙年限定

蛇年限定

关于楼主

商务推广