纯css,js时钟
一个简短的小demo，纯css，js生成的一个时钟，算是另一种思路吧,运用js脚本化css3 的keyframes，不用js设置一个定时器，每秒执行一下函数。
样式没什么特点，主要就是一个js操作css3动画，动态生成 keyframes 的一个应用
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
width: 100%;
height: 100%;
}
/* 最外层的两个圈 */
.wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 400px;
border: 10px solid red;
border-radius: 50%;
box-shadow: 0px 0px 3px 15px black;
}
/* 时钟上的刻度 */
.mark li{
position: absolute;
top: 0px ;
left: calc(50% - 10px);
width: 20px;
height: 200px;
/* background: pink; */
box-sizing: border-box;
padding-top: 3px;
transform-origin: bottom;
/* transform: rotate(20deg); */
}
.mark .mark_item {
height: 6px;
width: 6px;
background: black;
border-radius: 50%;
position: absolute;
left: calc(50% - 3px);
}
/* 代表数字的那个长一点的刻度 */
.mark li:nth-of-type(5n+1) .mark_item {
height: 18px;
width: 6px;
border-radius: 0%;
}
.mark li .text {
width: 100%;
text-align: center;
position: absolute;
top: 22px;
}
/* 指针 */
.niddle li {
position: absolute;
left: calc(50% - 4px);
bottom: 50%;
width: 8px;
height: 150px;
transform-origin: bottom;
/* background: red; */
}
.niddle li .middle_circle {
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
box-shadow: 0px 0px 0px 3px #ccc , 0px 0px 0px 5px #fcfcfc;
}
.niddle .hour {
width: 100%;
height: 60%;
background: #822cff;
position: absolute;
bottom: 0px;
}
.niddle .min {
width: 100%;
height: 75%;
background: #000;
opacity: .7;
position: absolute;
bottom: 0px;
}
.niddle .second {
width: 50%;
height: 90%;
position: absolute;
left: 25%;
bottom: 0px;
background: red;
opacity: .7;
}
.triangle {
border-width: 8px;
border-style: solid;
border-color: transparent transparent red transparent;
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translate(-50%, -100%);
}
.niddle li:nth-of-type(3) {
animation: secondMove 60s linear infinite;
}
.niddle li:nth-of-type(2) {
animation: minMove 3600s linear infinite;
}
.niddle li:nth-of-type(1) {
animation: hourMove 86400s linear infinite;
}
@keyframes secondMove{
/* from {transform: rotate(0deg);}
to {transform: rotate(360deg);} */
}
@keyframes minMove{
/* from {transform: rotate(0deg);}
to {transform: rotate(360deg);} */
}
@keyframes hourMove{
/* from {transform: rotate(0deg);}
to {transform: rotate(360deg);} */
}
</style>
<body>
<div class="wrapper" title="name">
<ul class="mark" id="mark">
<!-- <li><div class="mark_item"></div><div class="text">12</div></li>
<li><div class="mark_item"></div></li>
<li><div class="mark_item"></div></li>
<li><div class="mark_item"></div></li>
<li><div class="mark_item"></div></li> -->
</ul>
<ul class="niddle">
<li id="hour"><div class="hour"></div><div class="middle_circle"></div></li>
<li id="min"><div class="min"></div><div class="middle_circle"></div></li>
<li id="second"><div class="second"><div class="triangle"></div></div><div class="middle_circle"></div></li>
</ul>
</div>
<script>
function init() {
createNumber() // 生成数字刻度
bindTimeSelf() // 自己设置时间
}
var wrapperDom = document.getElementById('mark')
var frag = document.createDocumentFragment()
var hour = document.getElementById('hour')
var min = document.getElementById('min')
var second = document.getElementById('second')
// 生成数字刻度
function createNumber() {
for (var i = 0; i <= 60 ; i ++) {
var li = document.createElement('li')
var mark_item = document.createElement('div')
mark_item.classList.add('mark_item')
li.appendChild(mark_item)
if(i % 5 == 0) {
var text = document.createElement('div')
i/5 ==0 ? "" : text.innerHTML = i / 5
text.classList.add('text')
li.appendChild(text)
text.style.transform = 'rotate(-'+i*6+'deg)'
}
li.style.transform = 'rotate('+i*6+'deg)'
frag.appendChild(li)
}
wrapperDom.appendChild(frag)
}
// 你自己设置时间
function bindTimeSelf() {
var date = new Date()
var secondDeg = date.getSeconds()*360/60;
var minuteDeg = date.getMinutes()*360/60 + Math.round(secondDeg/60);
var hourDeg = date.getHours()*360/12 + Math.round(minuteDeg/12);
startFrame('hourMove',hourDeg)
startFrame('minMove', minuteDeg)
startFrame('secondMove', secondDeg)
}
// 设置关键帧
function startFrame(type, deg) {
var end = deg+360
var keyframes = getKeyFrame(0,type)
keyframes[0].appendRule('from {transform: rotate('+deg+'deg)}')
keyframes[0].appendRule('to {transform: rotate('+end+'deg)}')
console.log(keyframes,"xxxxx是关键帧")
}
// 获取动画关键帧样式 以待修改
function getKeyFrame (index, name){
var styleSheet = document.styleSheets[index], keyframesRule = [];
[].slice.call(styleSheet.cssRules).forEach(function(item){
if (item.name === name) {
keyframesRule.push( item );
}
})
return keyframesRule;
}
init()
</script>
</body>
</html>
先拿到样式表，再一点点找到想要修改的keyframes
var styleSheet = document.styleSheets[index] // 先拿到样式表
// styleSheet.cssRules 这里是 一些样式，在这里找定义的关键帧
[].slice.call(styleSheet.cssRules).forEach(function(item){
if (item.name === '你想找的关键帧名字') {
item.appendRule('from {transform: rotate(0deg)}') // 增加一个关键帧
item.deletRule('from') // 删除一个关键帧
// 还有其他一些方法 findRule() ,等可以到他原型上找
}
})