效果演示
这段 HTML 和 CSS 代码创建了一个卡片式的体育比赛信息展示组件，用于显示篮球比赛的两个队伍名称、比赛时间、比分以及一些装饰性的视觉元素。
HTML
<div class="card"><div data-status="inprogress" class="teams"><span class="team-info team-home"><span class="team-info-container"><span class="team-name-info">湖人</span></span></span><span class="event-scoreboard"><span class="event-score-container"><span class="current-time-container"><span class="event-current-time"><span class="event-clock">2024/11/22</span></span><span class="progress-dots" data-progress="1S"><span class="load"></span></span></span><span class="score-container"><span class="score-home">130</span><span class="custom-sep">-</span><span class="score-away">100</span></span></span></span><span class="team-info team-away"><span class="team-info-container"><span class="team-icon-container"></span><span class="team-name-info">魔术</span></span></span></div>
</div>- card: 这是整个卡片的容器。
- data-status=“inprogress”，teams: 表示比赛队伍信息的容器，data-status=“inprogress” 可能用于表示比赛正在进行。
- team-info team-home 和 team-info team-away: 分别表示主队和客队的信息。
- team-name-info: 显示队伍名称。
- event-scoreboard: 包含比赛时间、进度点和比分的容器。
- event-clock: 显示比赛的日期。
- progress-dots: 显示比赛进度的点。
- score-container: 显示比分。
CSS
.card * {font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.card .teams {display: flex;flex-wrap: nowrap;align-items: center;justify-content: center;background: linear-gradient(90deg, transparent, #111, transparent);
}
.card .teams > span {flex: 1;text-align: center;position: relative;font-size: 13px;text-wrap: nowrap;
}
.card .teams .team-name-info {text-wrap: nowrap;color: #ffffff;max-width: 210px;text-overflow: ellipsis;font-weight: 600;overflow: hidden;display: block;
}
.card .teams span.progress-dots {height: 3px;position: relative;width: 60px;display: block;overflow: hidden;margin: 0;border-radius: 10px;
}
.card .teams span.progress-dots .load {background: linear-gradient(90deg, #3a3dff, #ff2929);display: block;height: 1.5px;width: 3px;bottom: 0;position: absolute;transform: translateX(0px);animation: loading_dots 7.5s ease both infinite;
}
@keyframes loading_dots {0% {width: 3px;transform: translateX(0px);}40% {width: 3px;transform: translateX(57px);}75% {width: 100%;transform: translateX(0px);}100% {width: 3px;transform: translateX(0px);}
}
.card .teams .team-home,
.card .teams .team-away {padding: 15px 37px;position: relative;overflow: hidden;
}
.card .teams .team-away {transform: skew(-41deg, 0deg);border-radius: 10px 10px 30px 10px;
}
.card .teams .team-home {border-radius: 10px 10px 10px 30px;transform: skew(41deg, 0deg);
}
.card .teams .team-home::after {position: absolute;top: -3px;background: #00caff;content: "";height: 23px;border-radius: 27px;left: -20px;filter: blur(2px);transform: rotate(208deg);width: 20px;box-shadow: 0px 0px 32px #00ffed;
}
.card .teams .team-home::before {position: absolute;bottom: -15px;background: #0048ff;content: "";height: 17px;border-radius: 80px;right: 0;filter: blur(1px);transform: translate(-50%, 0%);width: 80%;box-shadow: 0px 0px 32px #0026ff;
}
.card .teams .team-away::after {position: absolute;top: -3px;background: #cc9d00;content: "";height: 23px;border-radius: 27px;right: -20px;filter: blur(2px);transform: rotate(208deg);width: 20px;box-shadow: 0px 0px 32px #cc3700;
}
.card .teams .team-away::before {position: absolute;bottom: -15px;background: #ff0000;content: "";height: 17px;border-radius: 80px;left: 0;filter: blur(1px);transform: translate(50%, 0%);width: 80%;box-shadow: 0px 0px 32px #d50000;
}.card .teams .team-home .team-name-info {transform: skew(-41deg, 0);
}
.card .teams .team-away .team-name-info {transform: skew(41deg, 0);
}.event-info-banner .info-heading {position: absolute;right: 12px;bottom: 5px;color: rgba(255, 255, 255, 0.2);margin: 0;
}
.card .event-scoreboard .event-score-container {display: flex;flex-wrap: wrap;padding: 10px;border-radius: 10px;width: fit-content;background: linear-gradient(#1e1e1e 0%, #0c0c0c8e 4%, #1a1419);box-shadow:inset 0 0 1px 0 #2c2c2c,0 0 20px 0 #1313139c;margin: 10px 0;
}
.card .event-scoreboard .event-score-container .score-container {font-size: 24px;background: linear-gradient(90deg, #3a3dff, #ff2929);-webkit-background-clip: text;width: 100%;-webkit-text-fill-color: transparent;
}
.card .event-scoreboard .event-score-container .current-time-container {font-size: 12px;margin-bottom: 8px;width: 100%;font-family: "SegoeUI";color: #a1a1a1;justify-content: center;text-align: center;display: flex;flex-direction: column;align-items: center;row-gap: 5px;
}
.card.event-scoreboard.event-score-container.current-time-container.event-clock {font-weight: 500;color: #eee;margin-right: 10px;
}- .card *: 设置了卡片内所有元素的字体。
- .card .teams: 设置了队伍信息的布局为 flex，不允许换行，水平垂直居中对齐。
- .card .teams > span: 设置了每个队伍信息的 flex 属性，文本居中，字体大小等。
- .card .teams .team-name-info: 设置了队伍名称的样式，包括颜色、最大宽度、文本溢出处理等。
- .card .teams span.progress-dots: 设置了进度点的样式，包括高度、宽度、边框半径等。
- @keyframes loading_dots: 定义了进度点的动画，使其在进度条上移动。
- .card .teams .team-home 和 .card .teams .team-away: 设置了主队和客队的内边距和相对位置。
- .card .teams .team-home::after 和 .card .teams .team-home::before: 使用伪元素创建主队的装饰性光晕效果。
- .card .teams .team-away::after 和 .card .teams .team-away::before: 使用伪元素创建客队的装饰性光晕效果。
- .card .event-scoreboard .event-score-container: 设置了比分容器的样式，包括背景、阴影、边框半径等。
- .card .event-scoreboard .event-score-container .score-container: 设置了比分文本的样式，使用背景剪切和文本填充颜色透明来创建渐变文本效果。
