web实现时钟效果


纯原生开发时钟效果,话不多说直接上代码。

HTML标签部分

<div class="cricles">
        <div class="pointls">
            
        div>
        <div class="pointM">
            
        div>
        <div class="poniters">
            <div class="point_ho">
                
            div>
            <div class="point_min">
                
            div>
            <div class="point_sec">
                
            div>
            <span>span>
        div>
    div>

css样式部分

<style>
        .cricles {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 100%;
            border: 2px solid yellow;
            margin: 100px auto;
            position: relative;
        }
        
        .pointL {
            background-color: red;
            height: 40px;
            width: 5px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        
        .pointS {
            background-color: black;
            height: 20px;
            width: 5px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
        
        .poniters {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            height: 10px;
            width: 10px;
            /* yellow; */
        }
        
        .poniters div {
            left: 0;
            right: 0;
            bottom: 4px;
            margin: auto;
            position: absolute;
            background-color: tomato;
            height: 60px;
            transform-origin: center bottom;
            width: 4px;
        }
        
        span {
            width: 15px;
            height: 15px;
            display: block;
            position: absolute;
            left: -5px;
            right: 0;
            bottom: -5px;
            box-shadow: 0 0 20px black;
            top: 0;
            margin: auto;
            border-radius: 50%;
            background-color: blueviolet;
        }
    style>

js部分