使用 html css 和 javascript 的秒表在 instagram 上关注我们... https://www.instagram.com/webstreet_code/
- Patricia Arquette原创
- 2024-11-11 01:56:02775浏览
在 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中文网其他相关文章！
JavaScript css ajax html auto using pointer function href display position margin padding border viewport background transform transition column flex https
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn