首页 > web前端 > js教程 > 正文

使用 html css 和 javascript 的秒表在 instagram 上关注我们... https://www.instagram.com/webstreet_code/

Patricia Arquette
发布: 2024-11-11 01:56:02
原创
774 人浏览过

Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

在 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板