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>