当前位置：首页 > news >正文

HTMLCSS：比赛记分卡

news 来源：原创 2025/8/3 3:25:43

效果演示

这段 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: 设置了比分文本的样式，使用背景剪切和文本填充颜色透明来创建渐变文本效果。

HTMLCSS：比赛记分卡

效果演示这段 HTML 和 CSS 代码创建了一个卡片式的体育比赛信息展示组件，用于显示篮球比赛的两个队伍名称、比赛时间、比分以及一些装饰性的视觉元素。 HTML <div class"card"><div data-status"inprogress" class"teams"…...

编程日记 2025/8/3 3:25:43

什么是 Faiss？

好的，我来详细解释 Faiss，它的用途、使用场景，以及如何安装和使用。什么是 Faiss？ Faiss 是由 Facebook AI Research 开发的一个开源库，专门用于高效的相似性搜索和聚类。它非常擅长在高维向量空间中进行快速搜索&a…...

编程日记 2025/8/3 3:07:21

【prism】遇到一个坑，分享！

背景我通用prism的方式写了一个弹窗，弹窗绑定一个 Loaded 事件，但是Loaded事件一直不触发！！！具体过程我的loaded事件也是通过命令的方式绑定的： <i:Interaction.Triggers><i:EventTrigger EventName="Loaded...

编程日记 2025/8/3 3:07:24

vue制作代码比较工具

前两天朋友问我有没有vue可以做一个json代码在线比较工具我也是在网上搜了一下找到的废话不说直接上代码采用 v3 pnpm i v-code-diff <div><CodeDiff:old-string"oldStr":new-string"newStr"output-format"side-by-side"/>…...

编程日记 2025/8/3 3:07:22

GPT系列文章

GPT系列文章 GPT1 GPT1是由OpenAI公司发表在2018年要早于我们之前介绍的所熟知的BERT系列文章。总结：GPT 是一种半监督学习，采用两阶段任务模型，通过使用无监督的 Pre-training 和有监督的 Fine-tuning 来实现强大的自然语言理解。在 Pre-t…...

编程日记 2025/8/3 3:25:41

Qt实现可拖拽的矩形

之前项目上需要用Qt来绘制可拖拽改变形状的矩形。看了Qt Graphics相关的内容，虽然对Qt怎么添加图元的有了些了解，但是具体如何实现拖拽效果，一时也没有什么好的想法。还好网上有人分享的例子，很受启发。后来又回顾了一下这部分的代…...

编程日记 2025/7/31 11:06:31

1. 打开浏览器利用webbrowser 模块的 open()函数可以启动一个新浏览器，打开指定的 URL。 import webbrowser webbrowser.open(http://inventwithpython.com/) 2. 猜数字游戏 # -*- coding: utf-8 -*- # This is a guess the number game. import randomsecretN…...

编程日记 2025/8/1 11:18:10

学习日志015--python单链表

创建 class Node:def __init__(self,data):# 数据域self.data data# 链接域self.next Noneclass LinkList:def __init__(self,):# 初始化头节点self.head None# 记录链表的长度self.size 0 增加 #头插def insert_head(self,value):# 创建新节点node Node(value)q self…...

编程日记 2025/8/1 22:33:46

51WORLD与南京水利研究院联合研发，国产数字孪生超融合一体机

近日，太湖流域水治理国际会议在江苏省无锡市举行。大会由水利部国际合作与科技司、河湖管理司、中国水利学会、水利部太湖流域管理局、无锡市人民政府、中国交通建设集团有限公司指导，南京水利科学研究院主办，以“践行新发展理念、推进流域水…...

编程日记 2025/8/2 13:40:17

自动泊车变自动撞车？小米SU7遭遇批量事故

科技新知原创作者丨依蔓编辑丨蕨影小米系统bug，70多辆小米SU7同一天自动泊车撞墙、撞柱！ 近日，多名车主反映小米汽车SU7标准版“自动泊车”功能出现故障，造成不同程度的撞击、剐蹭损伤。小米客服此前回应涉事车主&#xff0…...

编程日记 2025/7/31 6:26:47

异常和中断

在计算机系统中，异常和中断是两种常见的用于处理异步事件的机制。以下是常见的异常和中断及其特点的详细解释： 异常（内中断） 异常，也称为内中断，是由CPU内部事件引起的中断。异常通常与程序执行的当前指令…...

编程日记 2025/8/2 17:31:07

代理IP在后端开发中的应用与后端工程师的角色

目录引言代理IP的基本概念和工作原理代理IP在后端开发中的应用网络爬虫与数据采集负载均衡与性能优化安全防护与隐私保护后端工程师在使用代理IP时面临的挑战结论引言在数字化时代，网络技术的飞速发展极大地推动了各行各业的发展。其中&#xff…...

编程日记 2025/7/30 18:48:20

设计模式之观察者模式

观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听一个主题对象（Subject）。当主题对象的状态发生变化时，所有依赖于它的观察者都会得到…...

编程日记 2025/8/1 16:12:07

SQLSever显示物理和逻辑 IO活动量的相关信息及显示分析、编译和执行各语句所需的毫秒数。

SQLSever SET STATISTICS IO显示物理和逻辑 IO活动量的相关信息及SET STATISTICS TIME显示分析、编译和执行各语句所需的毫秒数。 1、 SET STATISTICS IO (Transact-SQL) 物理 IO 与访问磁盘上的数据页相关，逻辑 IO 与访问内存中的数据页（数据缓存&…...

编程日记 2025/7/30 18:48:14

CSS3 动画：前端开发的动态美

CSS3 动画：前端开发的动态美 CSS3 动画是现代网页设计中不可或缺的一部分，它为静态的网页元素添加了动态效果，提升了用户体验。本文将深入探讨CSS3动画的基础知识、高级技巧，并展示如何在实际项目中应用这些动画。 CSS3 动画基础 CSS3动画主要通过@keyframes和动画属性（…...

编程日记 2025/7/28 13:55:44

JavaWeb之综合案例

前言这一节讲一个案例 1. 环境搭建然后就是把这些数据全部用到sql语句中执行 2.查询所有-后台&前台我们先写后台代码 2.1 后台 2.2 Dao BrandMapper： 注意因为数据库里面的名称是下划线分割的，我们类里面是驼峰的，所以要映射 …...

编程日记 2025/8/1 15:16:22

基于Spring Boot+Unipp的博物馆预约小程序（协同过滤算法、二维码识别）【原创】

🎈系统亮点：协同过滤算法、二维码识别； 一.系统开发工具与环境搭建 1.系统设计开发工具后端使用Java编程语言的Spring boot框架项目架构：B/S架构运行环境：win10/win11、jdk17 前端： 技术：框…...

编程日记 2025/8/1 22:36:53

使用 Maven 构建一个简单的 Java 项目

Apache Maven 是一个强大的构建自动化工具，主要用于 Java 项目。它简化了构建和管理任何基于 Java 的项目的流程。本指南将涵盖 Maven 的安装、设置一个简单的 Java 项目以及使用 Maven 运行该项目。 1. 安装安装 Java 在安装 Maven 之前，需要确保…...

编程日记 2025/7/31 20:18:49

【51单片机】LCD1602液晶显示屏

学习使用的开发板：STC89C52RC/LE52RC 编程软件：Keil5 烧录软件：stc-isp 开发板实图： 文章目录 LCD1602存储结构时序结构编码 —— 显示字符、数字 LCD1602 LCD1602（Liquid Crystal Display）液晶显示屏是…...

编程日记 2025/7/30 18:40:43

UDP协议

UDP（UserDatagramProtocol）是一个简单的传输层协议，特点：无连接、不可靠、面向数据包、全双工。报文结构 1.源端口： 源端口号，需要对方回信时选用，不需要时全部置0. 2.目的端口：目…...

编程日记 2025/7/30 18:12:45

阅读 ADiffusion-Based Framework for Multi-Class Anomaly Detection

A Diffusion-Based Framework for Multi-Class Anomaly Detection 我觉得引言部分写的不错，将问题清楚的讲出来了，值得借鉴！！ 摘要基于重建的方法在异常检测方面取得了显著成果。最近流行的扩散模型的卓越图像重建能力引发了研…...

编程日记 2025/8/3 0:42:50

网络云计算】2024第47周-每日【2024/11/21】周考-实操题-RAID6实操解析1

文章目录 1、RAID6配置指南（大致步骤）2、注意事项3、截图和视频网络云计算】2024第47周-每日【2024/11/21】周考-实操题-RAID6实操 RAID6是一种在存储系统中实现数据冗余和容错的技术，其最多可以容忍两块磁盘同时损坏而不造成数据丢失。RAID…...

编程日记 2025/7/30 15:54:21

ts- declare关键词及vue3报错“Window typeof globalThis”上不存在属性“nextLoading”、`

报错“Window & typeof globalThis”上不存在属性“nextLoading”、代码环境：vue3、ts 阮一峰讲解 declarets 用法告诉编译器某个类型是存在的下面的例子是脚本使用浏览器全局对象document。 declare var document; document.title "Hello";上面…...

编程日记 2025/8/1 5:18:52

【STM32】在 STM32 USB 设备库添加新的设备类

说实话，我非常想吐槽 STM32 的 USB device library，总感觉很混乱。 USB Device library architecture 根据架构图： Adding a custom class 如果你想添加新的设备类，必须修改的文件有 usbd_desc.cusbd_conf.cusb_device.c 需要…...

编程日记 2025/7/29 19:55:33

【单点知识】基于PyTorch讲解自动编码器（Autoencoder）

文章目录 0. 前言1. 自动编码器的基本概念1.1 定义1.2 目标1.3 结构 2. PyTorch实现自动编码器2.1 导入必要的库2.2 定义自动编码器模型2.3 加载数据2.4 训练自动编码器 3. 自动编码器的意义4. 自动编码器的应用4.1 图像处理4.2自然语言处理：4.3推荐系统&#xff1a…...

编程日记 2025/7/31 19:47:08

html+js实现图片的放大缩小等比缩放翻转，自动播放切换，顺逆时针旋转

效果图： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片预览</title><sty…...

编程日记 2025/8/1 10:45:44

【蓝桥杯C/C++】翻转游戏：多种实现与解法解析

博客主页： [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 💯题目💯问题分析解法一：减法法解法二：位运算解法解法三：逻辑非解法解法四：条件运算符解法解法五：数组映射法不同解法的比较…...

编程日记 2025/7/31 20:02:49

介绍一下toupper(ch)；函数(c基础)

hi , I am 36 适合对象c语言初学者 toupper(ch1); tolower(ch2); 是返回ch的大写或小写的字符但并不改变ch 若传递数字仍返回该数字格式 #include<ctype.h> char res toupper(ch); 链接扫雷游戏代码分享(c基础)-CSDN博客 hi , I am 36. thanks for your look…...

编程日记 2025/8/1 1:44:24

如何使用Python代码实现给GPU预加热

如何使用Python代码实现给GPU预加热一、引言二、使用深度学习框架进行预加热2.1 TensorFlow预加热2.2 PyTorch预加热三、使用CUDA进行预加热四、预加热的效果评估与优化五、结论与展望在高性能计算和深度学习领域，GPU（图形处理器）已经成为不可或缺的加速工具。然而，在实际…...

编程日记 2025/8/1 19:16:58

基于 SpringBoot 的作业管理系统【附源码】

基于 SpringBoot 的作业管理系统效果如下： 系统注册页面学生管理页面作业管理页面作业提交页面系统管理员主页面研究背景随着社会的快速发展，信息技术的广泛应用已经渗透到各个行业。在教育领域，课程作业管理是学校教学活动中的重要…...

编程日记 2025/8/2 19:30:35

LeetCode题解：26.删除有序数组中的重复项【Python题解超详细，双指针法】，知识拓展：原地修改

题目描述给你一个非严格递增排列的数组 nums ，请你原地删除重复出现的元素，使每个元素只出现一次 ，返回删除后数组的新长度。元素的相对顺序应该保持一致。然后返回 nums 中唯一元素的个数。考虑 nums 的唯一元素的数量为 k &…...

编程日记 2025/7/31 22:06:30

docker 容器运行Ruoyi-cloud

1，linux系统安装openjdk1.8,mvn,dokcer,node,git 2，拉取代码 1）查看gitee仓库地址 2）创建/app文件夹，进入app目录 mkdir /app cd /app 3）clone代码 4）修改配置文件中nacos地址 # 修改注…...

编程日记 2025/7/31 7:07:01

【Unity How】Unity中如何实现物体的匀速往返移动

直接上代码 using UnityEngine;public class CubeBouncePingPong : MonoBehaviour {[Header("移动参数")][Tooltip("移动速度")]public float moveSpeed 2f; // 控制移动的速度[Tooltip("最大移动距离")]public float maxDistance 5f; // 最大…...

编程日记 2025/7/31 11:51:35

STM32完全学习——系统时钟设置

一、时钟框图的解读首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟，由于内部HSI存在较大的误差，因此我们在系统完成上电初始化，之后需要将STM32的时钟切换到外部HSE作为系统时钟，那么我…...

编程日记 2025/8/2 16:43:40

简单理解下基于 Redisson 库的分布式锁机制

目录简单理解下基于 Redisson 库的分布式锁机制代码流程：方法的调用：具体锁的实现：riderBalance 方法：tryLock 方法（重载）：tryLock 方法（核心实现）： 简单理解…...

编程日记 2025/8/2 13:30:37

ruoyi框架完成分库分表，按月自动建表功能

前提这个分库分表功能，按月自动建表，做的比较久了，还没上线，是在ruoyi框架内做的，踩了不少坑，但是已经实现了，就分享一下代码吧参考先分享一些参考文章【若依系列】集成ShardingSphere S…...

编程日记 2025/7/31 23:38:40

数据结构【单链表练习】

今天来探讨两个练习题要使用的思想为快慢指针。 1、返回链表的中间节点给你单链表的头结点 head ，请你找出并返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。整体思路如下图所示： 代码如下： /*** Definition f…...

编程日记 2025/7/29 4:54:01

wsl虚拟机中的dockers容器访问不了物理主机

1 首先保证wsl虚拟机能够访问宿主机IP地址，wsl虚拟机通过vEthernet (WSL)的地址访问，着意味着容器也要通过此IP地址访问物理主机。 2 遇到的问题：wsl虚拟机中安装了docker，用在用到docker容器内的开发环境，但是虚拟机…...

编程日记 2025/8/3 1:40:27

Elasticsearch 开放推理 API 增加了对 IBM watsonx.ai Slate 嵌入模型的支持

作者：来自 Elastic Saikat Sarkar 使用 Elasticsearch 向量数据库构建搜索 AI 体验时如何使用 IBM watsonx™ Slate 文本嵌入。 Elastic 很高兴地宣布，通过集成 IBM watsonx™ Slate 嵌入模型，我们的开放推理 API 功能得以扩展，这…...

编程日记 2025/8/2 7:22:42

【如何用更少的数据作出更好的决策】-gpt生成

如何用更少的数据作出更好的决策用更少的数据作出更好的决策是一种能力的体现，需要结合有效的方法、严谨的逻辑以及对问题的深刻理解。以下是一些可以帮助你实现这一目标的策略： 明确目标在收集和分析数据之前，先明确你的决策目标是什么…...

编程日记 2025/7/30 12:32:59

webview4/edgewebbrower学习记录——执行js

webview2可执行js方法：WVBrowser1.ExecuteScript(js, 1003) 参数1为js语句，参数2为命令号，执行完毕，会执行 procedure TBrowserFrame.WVBrowser1ExecuteScriptCompleted(Sender: TObject; aErrorCode: HRESULT; const aResultOb…...

编程日记 2025/7/30 21:54:55

Java文件上传解压

目录结构工具类枚举定义文件类型 public enum FileType {// 未知UNKNOWN,// 压缩文件ZIP, RAR, _7Z, TAR, GZ, TAR_GZ, BZ2, TAR_BZ2,// 位图文件BMP, PNG, JPG, JPEG,// 矢量图文件SVG,// 影音文件AVI, MP4, MP3, AAR, OGG, WAV, WAVE}为了避免文件被修改后缀&#xff0…...

编程日记 2025/7/29 20:45:26

人工智能（AI）与机器学习（ML）基础知识

目录 1. 人工智能与机器学习的核心概念什么是人工智能（AI）？ 什么是机器学习（ML）？ 什么是深度学习（DL）？ 2. 机器学习的三大类型 （1）监督式学…...

编程日记 2025/7/31 12:38:10

autoware（2）运行自己的数据集

上一节完成了autoware.ai的安装和编译跑通了demo数据集，本将自己录制的数据包用于测试 1.修改点云地图将加载点云地图的my_map.launch文件复制并命名为my_map_test.launch， （1）point cloud处替代原来的点云地图为自己的&#…...

编程日记 2025/7/30 19:42:00

HBase Java基础操作

Apache HBase 是一个开源的、分布式的、可扩展的大数据存储系统，它基于 Google 的 Bigtable 模型。使用 Java 操作 HBase 通常需要借助 HBase 提供的 Java API。以下是一个基本的示例，展示了如何在 Java 中连接到 HBase 并执行一些基本的操作&#xff0c…...

编程日记 2025/7/22 6:10:31

巧用观测云可用性监测（云拨测）

前言做为系统运维或者开发，很多时候我们需要能够实时感知我们所运维的系统和服务的情况，比如以下的场景： 系统上线前测试：包括功能完整性检查，确保页面元素（如图像、视频、脚本等）都能够正常…...

编程日记 2025/8/1 8:02:55

Chrome离线安装包下载

1、问Chrome的官网：https://www.google.cn/chrome/ 直接下载的是在线安装包，安装需要联网。 2、如果需要在无法联网的设备上安装Chrome，需要在上面的地址后面加上?standalone1。 Chrome离线安装包下载地址：https://www.google.c…...

编程日记 2025/8/1 0:39:50