在 Instagram 上关注我们:https://www.instagram.com/webstreet_code/
<html lang="zh-cn"> <头> <元名称=“视口”内容=“宽度= , 初始比例=1.0"> <标题>秒表</标题> <链接 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 身体{ 显示:柔性; 调整内容:居中; 对齐项目:居中; 高度:100vh; 背景颜色:#282c34; 颜色:白色; 字体系列:Arial、Helvetica、sans-serif; 弹性方向:列; } 。钟{ 显示:柔性; 弯曲方向:列; 对齐项目:居中; 下边距:20px; } .钟面{ 宽度:300px; 高度:300px; 背景颜色:#282c34; 边界半径:50%; 位置:相对; 框阴影: 0 0 40px 1px rgb(56, 56, 62); } 。手 { 宽度:36%; 高度:4px; 背景:#58f5db; 位置:绝对; 顶部:50%; 左:11%; 变换源:100%; 变换:旋转(90度); 转换计时功能:缓入缓出; 过渡:全部0.05s; } 。二手{ 背景颜色:蓝色; z 索引:1; } 。圆圈 { 高度:20px; 宽度:20px; 边界半径:50%; 背景颜色:白色; 位置:绝对; 顶部:48%; 左:44%; z 指数:0.8; } .内圆{ 高度:10px; 宽度:10px; 边界半径:50%; 背景颜色:蓝色; 边距:自动; 顶部边距:5px } /* 时钟标记 */ .标记{ 位置:绝对; 宽度:100%; 高度:100%; 显示:柔性; 调整内容:居中; 对齐项目:居中; /* 变换:translateY(-50%); */ } .markings div { 位置:绝对; 字体大小:16px; 变换:翻译(-50%,-50%); } 。打钩{ 宽度:2px; 高度:10px; 背景颜色:白色; 位置:绝对; 变换原点:中心; } 。数字的 { 字体大小:24px; 位置:绝对; 顶部:20%; 宽度:100%; 文本对齐:居中; } .按钮{ 显示:柔性; 间隙:20px; } 我{ 字体大小:40px; 光标:指针; }.fa-play{ 背景颜色:蓝色; 内边距:10px; 边界半径:50%; } .fa-停止{ 颜色: 红色; 字体大小:45px } .fa-向右旋转{ 边距:8px; 左边距:35px; } </风格> </头> <div> </div>
以上是使用 html css 和 javascript 的秒表在 instagram 上关注我们... https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章!