爱站程序员基地原生css钟表
***下面是效果图：***
html代码
<!---设置时钟--><div class=\"clock\"><!--设置秒针--><div class=\"second-wrapper\"><div class=\"second\"></div></div><!--设置分针--><div class=\"minute-wrapper\"><div class=\"minute\"></div></div><!--设置时针--><div class=\"hour-wrapper\"><div class=\"hour\"></div></div><!--设置数字--><div class=\"num\"><span class=\"twelve\">12</span><span class=\"one\">1</span><span class=\"two\">2</span><span class=\"three\">3</span><span class=\"four\">4</span><span class=\"five\">5</span><span class=\"six\">6</span><span class=\"seven\">7</span><span class=\"eight\">8</span><span class=\"nine\">9</span><span class=\"ten\">10</span><span class=\"eleven\">11</span></div><!--给中间点--><div class=\"dot\"></div></div>
css代码
<style>.clock{width: 500px;height: 500px;background-color: #ff9999;margin: 50px auto;border-radius: 50%;border: 5px solid black;position: relative;/* background-image: url(\"./img/bg3.jpg\");background-size: cover; */}.clock > div{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;}/*设置秒针外部*/.second-wrapper{width:50%;height:90%;/* background-color: #bbffaa; */animation: run 60s infinite steps(60);}/*设置秒针*/.second{width:3px;height:50%;background-color: red;margin: 0 auto;}/*设置分针外部*/.minute-wrapper{width:60%;height:60%;/* background-color: blue; */animation: run 3600s infinite steps(60);}/*设置分针*/.minute{width: 6px;height: 50%;background-color: black;margin: 0 auto;}/*设置时针外部*/.hour-wrapper{width: 30%;height: 30%;/* background-color: blueviolet; */animation: run 43200s infinite linear;}/*设置时针*/.hour{width: 8px;height: 50%;background-color: black;margin: 0 auto;}.num{width: 100%;height:100%;border-radius: 50%;}.twelve{position: absolute;top: 0;left:235px;bottom: 0;margin: 0 auto;color: seagreen;font-size: 25px;}.one{position: absolute;top:30px;left:372px;bottom:0;color: seagreen;font-size: 25px;}.two{position: absolute;top:123px;left:458px;bottom:0;color: seagreen;font-size: 25px;}.three{position: absolute;top:235px;left:487px;bottom:0;color: seagreen;font-size: 25px;}.four{position: absolute;top:355px;left:450px;bottom:0;color: seagreen;font-size: 25px;}.five{position: absolute;top:442px;left:364px;bottom:0;color: seagreen;font-size: 25px;}.six{position: absolute;top:474px;left:242px;bottom:0;color: seagreen;font-size: 25px;}.seven{position: absolute;top:442px;left:125px;bottom:0;color: seagreen;font-size: 25px;}.eight{position: absolute;top:353px;left:35px;bottom:0;color: seagreen;font-size: 25px;}.nine{position: absolute;top:235px;left:0px;bottom:0;color: seagreen;font-size: 25px;}.ten{position: absolute;top:120px;left:30px;bottom:0;color: seagreen;font-size: 25px;}.eleven{position: absolute;top:30px;left:115px;bottom:0;color: seagreen;font-size: 25px;}/*设置中间圆点*/.dot{width: 20px;height: 20px;border-radius: 50%;background-color: black;}@keyframes run{from{transform: rotateZ(0);}to{transform: rotateZ(360deg);}}</style>
