css时钟
程序员文章站
2022-05-28 09:04:29
...
纯css时钟表盘和动画
web前端的老师留下了一个只能用css做时钟的作业，尝试了一下，但表针拼接的还是有点怪异。
要求
实际结果
表盘
这里我的表盘主要由表盘底部，针，和响应顶部三部分
表盘底部
表盘底部是三层，分别有三个div块，
最下面是一个绿色的大圆，其上是一个稍小的蓝色圆，蓝色圆上面是另一种蓝色的半圆，共同构成表盘底部
表盘数字是另外一个css样式.te控制
针
这里我的针是拼合的，有少许不和谐
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
.clock{
width: 540px;
height: 540px;
position: relative;
}
.clock_table_0{
margin: 200px 0 0 0;
width: 540px;
height: 540px;
position: absolute;
background: rgb(187,187,0);
border-radius: 50% 50% 50% 50%;
border: 1px solid black;
transform: rotate(45deg);
}
.clock_table_1{
position: absolute;
top: 20px;
margin: 0px 0px 0px 0px;
width:500px;
height:500px;
border-radius: 250px 250px 250px 250px;
//box-shadow:0px 0px 20px red;
//transform:rotate(45deg);
//background:rgb(193,224,255);
background:radial-gradient(circle,rgb(193,224,255) 55%,rgb(154,178,201));
}
.clock_table_2{
position: absolute;
top: -480px;
margin: 0px 0px 0px 250px;
width:250px;
height:500px;
border-radius: 0px 250px 250px 0px;
//transform:rotate(45deg);
//background:rgb(178,210,243);
background:radial-gradient(circle,rgb(178,210,243) 55%,rgb(154,178,201));
}
.te{
font-size: 64px;
color:rgb(193,224,255);
text-shadow: 5px 0px 1px rgb(126,145,164);
}
.shizhen_ro{
width: 200px;
height: 36px;
left: 5px;
top: -628px;
animation: action_0 360s linear infinite;
}
@keyframes action_0 {
from {
transform: rotate(-90deg) ;
}
to {
transform: rotate(270deg) ;
}
}
.shizhen_0{
width: 100px;
height: 18px;
background: black;
border-radius: 18px;
//border-left: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 18px solid rgb(86,86,86);
left: 60px;
transform: rotate(180deg);
}
.shizhen_1{
width: 0;
height: 0;
left:59px;
top: 9px;
transform: rotate(90deg);
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 20px solid rgb(86,86,86);
border-radius: 100%;
}
.fenzhen_ro{
width: 260px;
height: 24px;
left: 5px;
top: -655px;
animation: action_1 30s linear infinite;
}
@keyframes action_1 {
from {
transform: rotate(-90deg) ;
}
to {
transform: rotate(270deg) ;
}
}
.fenzhen_0{
width: 130px;
height: 12px;
background: rgb(0,86,162);
border-radius: 12px;
//border-left: 20px solid red;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 12px solid rgb(0,129,243);
left: 75px;
transform: rotate(180deg);
}
.fenzhen_1{
width: 0;
height: 0;
left:70px;
top: 6px;
transform: rotate(90deg);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 13px solid rgb(0,129,243);
border-radius: 100%;
}
.miaozhen_ro{
width: 320px;
height: 16px;
left: 5px;
top: -690px;
visibility:hidden;
animation: action_2 60s linear infinite;
}
@keyframes action_2 {
from {
transform: rotate(-90deg) ;
}
to {
transform: rotate(270deg) ;
}
}
.miaozhen_0{
width: 160px;
height: 8px;
background: rgb(255,25,25);
border-radius: 8px;
//border-left: 20px solid red;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 8px solid rgb(179,25,25);
left: 75px;
transform: rotate(180deg);
}
.miaozhen_1{
width: 0;
height: 0;
left:84px;
top: 6px;
transform: rotate(90deg);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 9px solid rgb(179,25,25);
border-radius: 100%;
}
.ta{
width: 540px;
height: 540px;
border-radius: 50%;
}
</style>
<script type="text/javascript">
function miaozhen_1()
{
document.getElementById("miaozhen").style.visibility="visible";
document.getElementById("fenzhen").style.animationDuration="3600s";
document.getElementById("shizhen").style.animationDuration="43200s";
}
function miaozhen_2()
{
document.getElementById("miaozhen").style.visibility="hidden";
document.getElementById("fenzhen").style.animationDuration="30s";
document.getElementById("shizhen").style.animationDuration="360s";
}
</script>
</head>
<body><center>
<!--表盘-->
<div class="ta" onMouseOver="miaozhen_1()" style="z-index: 100;position: relative" onMouseOut="miaozhen_2()">
<div id="clock" class="Clock" style="z-index: -100;position: relative">
<div class="clock_table_0" style="z-index: -90;position: relative" >
<div class="clock_table_1" style="z-index: -80;position: relative"></div>
<div class="clock_table_2" style="z-index: -50;position: relative"></div>
</div>
<!--表盘数字-->
<div class="te" style="z-index: -20;position: relative;top: -530px">12</div>
<div class="te" style="z-index: -20;position: relative;left: 220px;top:-399px">3</div>
<div class="te" style="z-index: -20;position: relative;top: -266px">6</div>
<div class="te" style="z-index: -20;position: relative;left:-220px;top: -565px">9</div>
<!--时针-->
<div id="shizhen" class="shizhen_ro" style="z-index: -15;position: relative">
<div class="shizhen_0" style="z-index: -10;position: relative">
<div class="shizhen_1" style="z-index: 0;position: relative"></div>
</div>
</div>
<!--分针-->
<div id="fenzhen" class="fenzhen_ro" style="z-index: -5;position: relative">
<div class="fenzhen_0" style="z-index: 0;position: relative">
<div class="fenzhen_1" style="z-index: 10;position: relative"></div>
</div>
</div>
<!--秒针-->
<div id="miaozhen" class="miaozhen_ro" style="z-index: 15;position: relative" >
<div class="miaozhen_0" style="z-index: 20;position: relative">
<div class="miaozhen_1" style="z-index: 30;position: relative"></div>
</div>
</div>
</div>
</div>
</center></body>
</html>
上一篇： 拼多多的内核 源自于黄峥的远见
下一篇： 多文件Python项目打包为可运行文件
推荐阅读
-
css3火焰文字样式代码_html/css_WEB-ITnose
-
JavaScript 拖放效果_html/css_WEB-ITnose
-
HTML系列（二）：头部meta元素_html/css_WEB-ITnose
-
Css fixed和absolute定位区别_html/css_WEB-ITnose
-
jsp 嵌套iframe 从iframe中表单提交并传值到外层_html/css_WEB-ITnose
-
如何在td中控制字体右对齐 且加粗_html/css_WEB-ITnose
-
dreamweaver8代码颜色_html/css_WEB-ITnose
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose
-
CSS鼠标悬停菜单 图片交换技术实现
-
js+SVG实现动态时钟效果