html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
❉ html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
抖音时钟原生JS文字钟源码由目前市面上比较给力的抖音数字罗盘源码，精致简洁的外观搭配创意的罗盘效果，用户可以自由挑选数字罗盘特效，这里整合了目前比较创新的特效玩法，设计感十足，小伙伴们可以前来本站，根据提示快速设计打造出来哦~
❉ 文章目录
❉ 效果演示
❉ 代码文件目录
1.抖音时钟原生JS文字钟源码特别说明
对于学习编程的朋友，可以参考一下，希望对大家有帮助。
2.抖音时钟数字罗盘源码说明
通过渠道进入交流群获取的，并且附带另外几款优质特效，还有html前端基础教学材料，需要的拿走，可以用来制作引导页背景
3.抖音时钟数字罗盘源码代码说明
本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码，供大家参考，具体内容如下
其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧!
一、罗盘时钟(代码实现)
html (部分)
<!DOCTYPE html>
<html lang="en">
<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" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/ceshi9_1.css" />
<link rel="stylesheet" href="css/ceshi9_2.css" />
<link rel="stylesheet" href="css/ceshi9_3.css" />
<title>抖音很火的罗盘时钟</title>
</head>
<style></style>
<body>
<div id="sum">
<div id="message">
<ul>
<li class="msgs" v-for="(item,index) in Arrays">{{item}}</li>
</ul>
</div>
<li id="shade"></li>
<div id="second">
<ul>
<li v-for="item in flag">
{{item}} </li>
</ul>
</div>
<div id="minute">
<ul>
<li v-for="item in flag_minute">
{{item}} </li>
</ul>
</div>
<div id="hour">
<ul>
<li v-for="item in flag_hour">
{{item}} </li>
</ul>
</div>
<div id="year">
<ul>
<li id="yearAll">天祈</li>
</ul>
</div>
<div id="mouth">
<ul>
<li v-for="item in flag_mouth">
{{item.name}} </li>
</ul>
</div>
<div id="solar">
<ul>
<li v-for="(item,index) in flag_solar" :key="index" v-on:mouseover="showMsg(index)" v-on:mouseout="hideMsg()" class="mm">
{{item.name}} </li>
</ul>
</div>
<div id="data">
<ul>
<li v-for="item in flag_data">
{{item.name}} </li>
</ul>
</div>
<div id="AP">
<ul>
<li v-for="item in flag_AP">
{{item.name}} </li>
</ul>
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script src="js/ceshi9.js"></script>
</html>
js (部分)
const vm = new Vue({
el: \'#sum\',
data() {
return {
flag: [\'零秒\', \'一秒\', \'二秒\', \'三秒\', \'四秒\', \'五秒\', \'六秒\', \'七秒\', \'八秒\', \'九秒\', \'十秒\', \'十一秒\', \'十二秒\', \'十三秒\', \'十四秒\', \'十五秒\', \'十六秒\', \'十七秒\', \'十八秒\', \'十九秒\', \'二十秒\', \'二十一秒\', \'二十二秒\', \'二十三秒\', \'二十四秒\', \'二十五秒\', \'二十六秒\', \'二十七秒\', \'二十八秒\', \'二十九秒\', \'三十秒\', \'三十一秒\', \'三十二秒\', \'三十三秒\', \'三十四秒\', \'三十五秒\', \'三十六秒\', \'三十七秒\', \'三十八秒\', \'三十九秒\', \'四十秒\', \'四十一秒\', \'四十二秒\', \'四十三秒\', \'四十四秒\', \'四十五秒\', \'四十六秒\', \'四十七秒\', \'四十八秒\', \'四十九秒\', \'五十秒\', \'五十一秒\', \'五十二秒\', \'五十三秒\', \'五十四秒\', \'五十五秒\', \'五十六秒\', \'五十七秒\', \'五十八秒\', \'五十九秒\'],
flag_minute: [\'零分\', \'一分\', \'二分\', \'三分\', \'四分\', \'五分\', \'六分\', \'七分\', \'八分\', \'九分\', \'十分\', \'十一分\', \'十二分\', \'十三分\', \'十四分\', \'十五分\', \'十六分\', \'十七分\', \'十八分\', \'十九分\', \'二十分\', \'二十一分\', \'二十二分\', \'二十三分\', \'二十四分\', \'二十五分\', \'二十六分\', \'二十七分\', \'二十八分\', \'二十九分\', \'三十分\', \'三十一分\', \'三十二分\', \'三十三分\', \'三十四分\', \'三十五分\', \'三十六分\', \'三十七分\', \'三十八分\', \'三十九分\', \'四十分\', \'四十一分\', \'四十二分\', \'四十三分\', \'四十四分\', \'四十五分\', \'四十六分\', \'四十七分\', \'四十八分\', \'四十九分\', \'五十分\', \'五十一分\', \'五十二分\', \'五十三分\', \'五十四分\', \'五十五分\', \'五十六分\', \'五十七分\', \'五十八分\', \'五十九分\'],
flag_hour: [\'十二时\', \'一时\', \'二时\', \'三时\', \'四时\', \'五时\', \'六时\', \'七时\', \'八时\', \'九时\', \'十时\', \'十一时\'],
flag_mouth: [{
name: \'一月\',
flag: false
}, {
name: \'二月\',
flag: false
}, {
name: \'三月\',
flag: false
}, {
name: \'四月\',
flag: false
}, {
name: \'五月\',
flag: false
}, {
name: \'六月\',
flag: false
}, {
name: \'七月\',
flag: false
}, {
name: \'八月\',
flag: false
}, {
name: \'九月\',
flag: false
}, {
name: \'十月\',
flag: false
}, {
name: \'十一月\',
flag: false
}, {
name: \'十二月\',
flag: false
}],
flag_solar: [{
name: \'立春\',
flag: false,
msg: \'公历2月03－05日交节立春，二十四节气之首，是春季的第一个节气。立春，意味着新的一个轮回已开启，乃万物起始、一切更生之义也。立，是“开始”之意；春，代表着温暖、生长。立春后阳气开始上升，日照增加，风和日暖，意味着万物闭藏的冬季已过去，开始进入生长的季节，万物至此渐次复苏.\'
}, {
name: \'雨水\',
flag: false,
msg: \'公历2月18－20日交节雨水节气标示着降雨开始，雨量渐增。雨雨水和谷雨、小满、小雪、大雪等节气一样，都是反映降水现象的节气，是古代农耕文化对于节令的反映。进入雨水节气，我国北方阴寒未尽，一些地方仍下雪，尚未入春，仍是很冷；南方大多数地方则是春意盎然，一幅早春的景象。\'
}, {
name: \'惊蛰\',
flag: false,
msg: \'公历3月05－07日交节惊蛰的意思是天气回暖，春雷始鸣，惊醒蛰伏于地下冬眠的昆虫。“惊蛰”标志着仲春卯月的开始。作为全年气温回升最快的节气，我国北方大部分地区平均气温已升至0℃以上。南方沿江江南地区为8℃以上，而西南和华南已达10至15℃以上，早已是一派融融春光了，日照时数也有了明显的增加。\'
}, {
name: \'春分\',
flag: false,
msg: \'公历3月20－22日交节春分时，太阳直射点在赤道上，此后太阳直射点继续北移，故春分也称“升分”。古时又称为“日中”、“日夜分”、“仲春之月”。南北半球昼夜平分，这天以后太阳直射位置继续由赤道向北半球推移，北半球开始昼长夜短。春分的意义，一是指一天时间白天黑夜平分，各为12小时；二是古时以立春至立夏为春季，春分正当春季三个月之中，平分了春季。\'
}, {
name: \'清明\',
flag: false,
msg: \'公历4月04－06日交节“清明”的含义是气候暖和，草木萌动，杏桃开花，处处给人以清新明朗、欣欣向荣的感觉。此时气候清爽温暖，万物“吐故纳新”，草木始发新枝芽，万物开始生长，大地呈现春和景明之象。\'
}, {
name: \'谷雨\',
flag: false,
msg: \'公历4月19－21日交节谷雨，是春季最后一个节气,顾名思义也就是播谷降雨的意思。在谷雨时节雨水会增多，大大有利于谷类农作物的生长。由于雨谷雨，这时田中的秧苗初插、作物新种，最需要雨水的滋润，所以说“春雨贵如油”。\'
}, {
name: \'立夏\',
flag: false,
msg: \'公历5月05－07日交节夏季的第一个节气，表示盛夏时节的正式开始。万物至此皆长大，故名立夏也。从此进入夏天，万物生长旺盛。习惯上把立夏当作是气温显著升高，炎暑将临，雷雨增多，农作物进入旺季生长的一个最重要节气。\'
}, {
name: \'小满\',
flag: false,
msg: \'公历5月20－22日交节“小满”节气，天气渐渐由暖变热，并且降水也会逐渐增多，小满节气意味着进入了大幅降水的雨季，雨水开始增多，往往会出现持续大范围的强降水。进入小满节气后，我国南方地区一般会降雨多、雨量大;北方，小满节气期间降雨很少，气温上升很快，与南方的温差进一步缩小。\'
}, {
name: \'芒种\',
flag: false,
msg: \'公历6月21－22日交节芒种，谐音“忙种”，芒种的“种”字，是指谷黍类作物播种的节令。“芒种”到来预示着农民开始了忙碌的田间生活。气候特点：节雨量充沛，气温显著升高。农事：作物栽培。\'
}, {
name: \'夏至\',
flag: false,
msg: \'公历6月21－22日交节夏至这天，太阳直射地面的位置到达一年的最北端，几乎直射北回归线，此时，北半球各地的白昼时间达到全年最长。夏至是太阳的转折点，这天过后它将走“回头路”，阳光直射点开始从北回归线向南移动，北半球白昼将会逐日减短。同时，夏至到来后，夜空星象也逐渐变成夏季星空。\'
}, {
name: \'小暑\',
flag: false,
msg: \'公历7月06－08日交节小暑，是夏季的第五个节气，表示盛夏正式开始。暑，表示炎热的意思，小暑为小热，还不十分热。意指天气开始炎热，但还没到最热。此时，已是初伏前后。各地也进入雷暴最多的季节，常伴随着大风、暴雨。\'
}, {
name: \'大暑\',
flag: false,
msg: \'公历7月22－24日交节大暑是一年中最热的节气，这时正值中伏前后，"湿热交蒸"在此时到达顶点。在我国很多地区，经常会出现摄氏40度的高温天气。大暑期间为一年最热时期，也是喜热作物生长速度最快的时期。这个时期气温最高，农作物生长最快，同时，很多地区的旱、涝、风灾等各种气象灾害也最为频繁。\'
}, {
name: \'立秋\',
flag: false,
msg: \'公历8月07－09日交节进入秋季，意味着降雨、风暴、湿度等，处于一年中的转折点，趋于下降或减少；在自然界，万物开始从繁茂成长趋向萧索成熟。立秋并不代表酷热天气就此结束，初秋期间天气仍然很热。按照“三伏”的推算方法，“立秋”这天往往还处在中伏期间，也就是说，酷暑并没有过完，真正凉爽一般要到白露节气之后。酷热与凉爽的分水岭并不是在立秋节气。\'
}, {
name: \'处暑\',
flag: false,
msg: \'公历8月22－24日交节“处”是终止的意思，处暑是表示炎热的酷暑结束，这时三伏已过或近尾声。由于受短期回热天气影响，处暑过后仍有持续高温，会感到闷热，天气由炎热向闷热转变。处暑节气处在短期回热天气期内，真正凉爽一般要到白露前后。\'
}, {
name: \'白露\',
flag: false,
msg: \'公历9月07－09日交节白露是一个反映自然界气温变化的重要节令。古人以四时配五行，秋属金，金色白，故以白形容秋露。白露前后，夏日残留的暑气逐渐消失，天地的阴气上升扩散，天气渐渐转凉。白露节气基本结束了暑天的闷热，是秋季由闷热转向凉爽的转折点。 白露过后，天高云淡、气爽风凉。\'
}, {
name: \'秋分\',
flag: false,
msg: \'公历9月22－24日交节秋分这一天同春分一样，阳光几乎直射赤道，昼夜几乎相等。从这一天起，阳光直射位置继续由赤道向南半球推移，北半球开始昼短夜长，南半球相反。秋分时节，我国大部分地区已经进入凉爽的秋季。\'
}, {
name: \'寒露\',
flag: false,
msg: \'公历10月08－09交节寒露是一个反映气候变化特征的节气，寒露节气后，昼渐短，夜渐长，日照减少，热气慢慢退去，寒气渐生，昼夜的温差较大，晨晚略感丝丝寒意。古人将寒露作为寒气渐生的表征。从气候特点上看，寒露时节，南方秋意渐浓，气爽风凉，少雨干燥；北方广大地区已从深秋进入或即将进入冬季。\'
}, {
name: \'霜降\',
flag: false,
msg: \'公历10月23－24交节霜降是秋季的最后一个节气，是秋季到冬季的过渡。霜降节气特点是早晚天气较冷、中午则比较热，昼夜温差大，秋燥明显。由于“霜”是天冷、昼夜温差变化大的表现，故以“霜降”命名这个表示“气温骤降、昼夜温差大”的节令。霜降时节，万物毕成，毕入于戌，阳下入地，阴气始凝。霜降过后，植物渐渐失去生机，大地一片萧索,气温骤降、昼夜温差大。霜降节气后，深秋景象明显，冷空气南下越来越频繁。\'
}, {
name: \'立冬\',
flag: false,
msg: \'公历11月07－8日交节立冬是季节类节气，表示自此进入了冬季，意味着风雨、干湿、光照、气温等，处于转折点上，开始从秋季向冬季气候过渡。“秋收冬藏”，万物在冬季闭藏，冬季是享受丰收、休养生息的季节。白昼时间缩短，北半球获得太阳的辐射量越来越少，但由于此时地表在下半年贮存的热量还有一定的能量，所以还不很冷。\'
}, {
name: \'小雪\',
flag: false,
msg: \'公历11月22－23交节小雪和大雪、雨水、谷雨、小满等节气一样，都是直接反映降水的节气。小雪节气是一个气候概念，它代表的是小雪节小雪节气是寒潮和强冷空气活动频数较高的节气。\'
}, {
name: \'大雪\',
flag: false,
msg: \'公历12月6－08日交节大雪是直接反映降水的节气。节气大雪的到来，意味着天气会越来越冷，降水量渐渐增多。大雪节气最常见的就是降温、下雨或下雪。大雪节气是一个气候概念，它代表的是大雪节气期间的气候特征，即气温与降水量。\'
}, {
name: \'冬至\',
flag: false,
msg: \'公历12月21－23交节冬至标示着北半球的太阳高度最小，白昼时间最短，但是冬至日的温度不是最低。冬至日是北半球各地一年中白昼最短的一天，并且越往北白昼越短。而冬至以后，阳光直射位置逐渐向北移动，北半球的白天就逐渐变长了。天文学上把立冬作为冬季的开始，冬至作为寒冷气候的开始。冬至之前通常不会很冷，冬季的真正寒天是在冬至之后。\'
}, {
name: \'小寒\',
flag: false,
msg: \'公历1月05－07日交节小寒，标志着寒冬正式开始。冷气积久而寒，小寒是天气寒冷但还没有到极点的意思。它与大寒、小暑、大暑及处暑一样，都是表示气温冷暖变化的节气。小寒的天气特点是：天渐寒，尚未大冷。俗话有讲：“冷在三九”，由于隆冬“三九”也基本上处于该节气之内，因此有“小寒胜大寒”之讲法。\'
}, {
name: \'大寒\',
flag: false,
msg: \'公历1月20－21日交节大寒同小寒一样，也是表示天气寒冷程度的节气。在我国部分地区，大寒不如小寒冷，但在某些年份和沿海少数地方，全年最低汽温仍然会出在大寒节气内。小寒、大寒是一年中雨水最少的时段。大寒以后，立春接着到来，天气渐暖。至此地球绕太阳公转了一周，完成了一个循环。\'
}],
Arrays: [],
flag_data: [{
name: \'一号\',
flag: false
}, {
name: \' 二号\',
flag: false
}, {
name: \'三号\',
flag: false
}, {
name: \' 四号\',
flag: false
}, {
name: \'五号\',
flag: false
}, {
name: \'六号\',
flag: false
}, {
name: \'七号\',
flag: false
}, {
name: \'八号\',
flag: false
}, {
name: \'九号\',
flag: false
}, {
name: \' 十号\',
flag: false
}, {
name: \'十一号\',
flag: false
}, {
name: \' 十二号\',
flag: false
}, {
name: \' 十三号\',
flag: false
}, {
name: \' 十四号\',
flag: false
}, {
name: \' 十五号\',
flag: false
}, {
name: \' 十六号\',
flag: false
}, {
name: \' 十七号\',
flag: false
}, {
name: \' 十八号\',
flag: false
}, {
name: \' 十九号\',
flag: false
}, {
name: \' 二十号\',
flag: false
}, {
name: \'二十一号\',
flag: false
}, {
name: \' 二十二号\',
flag: false
}, {
name: \' 二十三号\',
flag: false
}, {
name: \' 二十四号\',
flag: false
}, {
name: \'二十五号\',
flag: false
}, {
name: \' 二十六号\',
flag: false
}, {
name: \' 二十七号\',
flag: false
}, {
name: \' 二十八号\',
flag: false
}, {
name: \' 二十九号 \',
flag: false
}, {
name: \' 三十号 \',
flag: false
}, {
name: \' 三十一号 \',
flag: false
}],
flag_AP: [{
name: \'上午\'
}, {
name: \'下午\'
}],
NllNumber: []
}
},
methods: {
showMsg: function(index) {
var this_ = this
var sum = this_.flag_solar
var a = 0
var b = 12
var newObject
var strings = sum[index].msg
var arrayy = strings.split(\'\')
var length = arrayy.length
var arrayOne
var stringOne = \'\'
for (var i = 0; i < 10; i++) {
arrayOne = arrayy.slice(a, b)
if (arrayOne.length !== 0) {
stringOne = arrayOne.join()
newObject = stringOne.replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\').replace(\',\', \'\')
this.Arrays.push(newObject)
}
if (i === 0) {
a += 12
b += 20
} else {
a += 20
b += 20
}
}
},
hideMsg: function() {
this.Arrays = []
this.NllNumber = []
}
}
})
var number = 0
function sell() {
var data = new Date()
var second = data.getSeconds() + 1
number = second * -6
document.getElementById(\'second\').setAttribute(\'style\', \'-webkit-transform:rotate\' + \'(\' + number + \'deg)\')
var myVar = setInterval(function() {
sell_one()
}, 1000)
}
function sell_one() {
document.getElementById(\'second\').setAttribute(\'style\', \'-webkit-transform:rotate\' + \'(\' + number + \'deg)\')
number += -6
}
sell()
var number_minute = 0
function minutes() {
var myVar = setInterval(function() {
sell_two()
}, 1000)
}
function sell_two() {
var data = new Date()
var minute = data.getMinutes()
number_minute = minute * -6
document.getElementById(\'minute\').style.webkitTransform = \'rotate\' + \'(\' + number_minute + \'deg)\'
}
minutes()
var number_hour = 0
function hours() {
var myVar = setInterval(function() {
sell_three()
}, 1000)
}
function sell_three() {
var data = new Date()
var hour = data.getHours()
number_hour = hour * -30
document.getElementById(\'hour\').style.webkitTransform = \'rotate\' + \'(\' + number_hour + \'deg)\'
}
hours()
function year() {
var data = new Date()
var year = data.getFullYear()
document.getElementById(\'yearAll\').innerHTML = year + \'年\'
}
year()
function solarAndMouth() {
var data = new Date()
var mouth = data.getMonth()
var number_mouth = mouth * -30
document.getElementById(\'mouth\').style.webkitTransform = \'rotate\' + \'(\' + number_mouth + \'deg)\'
document.getElementById(\'solar\').style.webkitTransform = \'rotate\' + \'(\' + number_mouth + \'deg)\'
}
solarAndMouth()
function dates() {
var data = new Date()
var date = data.getDate()
var number_date = date * -11.25 + 11.25
document.getElementById(\'data\').style.webkitTransform = \'rotate\' + \'(\' + number_date + \'deg)\'
}
dates()
function APS() {
var data = new Date()
var ap = data.getHours()
if (ap > 12) {
document.getElementById(\'AP\').style.webkitTransform = \'rotate(180deg)\'
} else {
document.getElementById(\'AP\').style.webkitTransform = \'rotate(0deg)\'
}
}
APS()
css (部分)
#year {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#mouth {
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#mouth li {
position: absolute;
width: 80px;
height: 20px
}
#mouth ul {
position: relative;
left: -40px;
top: -10px
}
#mouth ul li:nth-child(1) {
transform: rotate(0deg) translateX(100px)
}
#mouth ul li:nth-child(2) {
transform: rotate(30deg) translateX(100px)
}
#mouth ul li:nth-child(3) {
transform: rotate(60deg) translateX(100px)
}
#mouth ul li:nth-child(4) {
transform: rotate(90deg) translateX(100px)
}
#mouth ul li:nth-child(5) {
transform: rotate(120deg) translateX(100px)
}
#mouth ul li:nth-child(6) {
transform: rotate(150deg) translateX(100px)
}
#mouth ul li:nth-child(7) {
transform: rotate(180deg) translateX(100px)
}
#mouth ul li:nth-child(8) {
transform: rotate(210deg) translateX(100px)
}
#mouth ul li:nth-child(9) {
transform: rotate(240deg) translateX(100px)
}
#mouth ul li:nth-child(10) {
transform: rotate(270deg) translateX(100px)
}
#mouth ul li:nth-child(11) {
transform: rotate(300deg) translateX(100px)
}
#mouth ul li:nth-child(12) {
transform: rotate(330deg) translateX(100px)
}
#solar {
position: absolute;
width: 300px;
height: 300px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(0);
transition: all 5s;
z-index: 50
}
#solar li {
position: absolute;
width: 80px;
height: 20px;
cursor: pointer
}
#solar ul {
position: relative;
left: -40px;
top: -10px
}
#solar ul li:nth-child(1) {
transform: rotate(22.5deg) translateX(210px)
}
#solar ul li:nth-child(2) {
transform: rotate(37.5deg) translateX(210px)
}
#solar ul li:nth-child(3) {
transform: rotate(52.5deg) translateX(210px)
}
#solar ul li:nth-child(4) {
transform: rotate(67.5deg) translateX(210px)
}
#solar ul li:nth-child(5) {
transform: rotate(82.5deg) translateX(210px)
}
#solar ul li:nth-child(6) {
transform: rotate(97.5deg) translateX(210px)
}
#solar ul li:nth-child(7) {
transform: rotate(112.5deg) translateX(210px)
}
#solar ul li:nth-child(8) {
transform: rotate(127.5deg) translateX(210px)
}
#solar ul li:nth-child(9) {
transform: rotate(142.5deg) translateX(210px)
}
#solar ul li:nth-child(10) {
transform: rotate(157.5deg) translateX(210px)
}
#solar ul li:nth-child(11) {
transform: rotate(172.5deg) translateX(210px)
}
#solar ul li:nth-child(12) {
transform: rotate(187.5deg) translateX(210px)
}
#solar ul li:nth-child(13) {
transform: rotate(202.5deg) translateX(210px)
}
#solar ul li:nth-child(14) {
transform: rotate(217.5deg) translateX(210px)
}
#solar ul li:nth-child(15) {
transform: rotate(232.5deg) translateX(210px)
}
#solar ul li:nth-child(16) {
transform: rotate(247.5deg) translateX(210px)
}
#solar ul li:nth-child(17) {
transform: rotate(262.5deg) translateX(210px)
}
#solar ul li:nth-child(18) {
transform: rotate(277.5deg) translateX(210px)
}
#solar ul li:nth-child(19) {
transform: rotate(292.5deg) translateX(210px)
}
#solar ul li:nth-child(20) {
transform: rotate(307.5deg) translateX(210px)
}
#solar ul li:nth-child(21) {
transform: rotate(322.5deg) translateX(210px)
}
#solar ul li:nth-child(22) {
transform: rotate(337.5deg) translateX(210px)
}
#solar ul li:nth-child(23) {
transform: rotate(352.5deg) translateX(210px)
}
#solar ul li:nth-child(24) {
transform: rotate(367.5deg) translateX(210px)
}
#data {
position: absolute;
width: 300px;
height: 300px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#data li {
position: absolute;
width: 80px;
height: 20px
}
#data ul {
position: relative;
left: -40px;
top: -10px
}
#data ul li:nth-child(1) {
transform: rotate(0) translateX(160px)
}
#data ul li:nth-child(2) {
transform: rotate(11.25deg) translateX(160px)
}
#data ul li:nth-child(3) {
transform: rotate(22.5deg) translateX(160px)
}
#data ul li:nth-child(4) {
transform: rotate(33.75deg) translateX(160px)
}
#data ul li:nth-child(5) {
transform: rotate(45deg) translateX(160px)
}
#data ul li:nth-child(6) {
transform: rotate(56.25deg) translateX(160px)
}
#data ul li:nth-child(7) {
transform: rotate(67.5deg) translateX(160px)
}
#data ul li:nth-child(8) {
transform: rotate(78.75deg) translateX(160px)
}
#data ul li:nth-child(9) {
transform: rotate(90deg) translateX(160px)
}
#data ul li:nth-child(10) {
transform: rotate(101.25deg) translateX(160px)
}
#data ul li:nth-child(11) {
transform: rotate(112.5deg) translateX(160px)
}
#data ul li:nth-child(12) {
transform: rotate(123.75deg) translateX(160px)
}
#data ul li:nth-child(13) {
transform: rotate(135deg) translateX(160px)
}
#data ul li:nth-child(14) {
transform: rotate(146.25deg) translateX(160px)
}
#data ul li:nth-child(15) {
transform: rotate(157.5deg) translateX(160px)
}
#data ul li:nth-child(16) {
transform: rotate(168.75deg) translateX(160px)
}
#data ul li:nth-child(17) {
transform: rotate(180deg) translateX(160px)
}
#data ul li:nth-child(18) {
transform: rotate(191.25deg) translateX(160px)
}
#data ul li:nth-child(19) {
transform: rotate(202.5deg) translateX(160px)
}
#data ul li:nth-child(20) {
transform: rotate(213.75deg) translateX(160px)
}
#data ul li:nth-child(21) {
transform: rotate(225deg) translateX(160px)
}
#data ul li:nth-child(22) {
transform: rotate(236.25deg) translateX(160px)
}
#data ul li:nth-child(23) {
transform: rotate(247.5deg) translateX(160px)
}
#data ul li:nth-child(24) {
transform: rotate(258.75deg) translateX(160px)
}
#data ul li:nth-child(25) {
transform: rotate(270deg) translateX(160px)
}
#data ul li:nth-child(26) {
transform: rotate(281.25deg) translateX(160px)
}
#data ul li:nth-child(27) {
transform: rotate(292.5deg) translateX(160px)
}
#data ul li:nth-child(28) {
transform: rotate(303.75deg) translateX(160px)
}
#data ul li:nth-child(29) {
transform: rotate(315deg) translateX(160px)
}
#data ul li:nth-child(30) {
transform: rotate(326.25deg) translateX(160px)
}
#data ul li:nth-child(31) {
transform: rotate(337.5deg) translateX(160px)
}
#AP {
position: absolute;
width: 400px;
height: 400px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#AP li {
position: absolute;
width: 80px;
height: 20px
}
#AP ul {
position: relative;
left: -40px;
top: -10px
}
#AP ul li:nth-child(1) {
transform: rotate(0deg) translateX(250px)
}
#AP ul li:nth-child(2) {
transform: rotate(180deg) translateX(250px)
}
ceshi9_2.css
#message {
position: absolute;
width: 240px;
height: 500px;
right: -310px;
font-size: 18px;
color: #b4eeb4;
font-family: fontOne;
box-sizing: border-box
}
#message ul li {
position: absolute;
margin: 25px 3px;
width: 18px;
text-align: center;
word-wrap: break-word;
border: 1px solid #fff
}
#message ul li:nth-child(1) {
right: 5px
}
#message ul li:nth-child(2) {
right: 30px
}
#message ul li:nth-child(3) {
right: 55px
}
#message ul li:nth-child(4) {
right: 80px
}
#message ul li:nth-child(5) {
right: 105px
}
#message ul li:nth-child(6) {
right: 130px
}
#message ul li:nth-child(7) {
right: 155px
}
#message ul li:nth-child(8) {
right: 180px
}
#message ul li:nth-child(9) {
right: 205px
}
#message ul li:nth-child(10) {
right: 230px
}
ceshi9_3.css
* {
padding: 0;
margin: 0
}
body {
background: #0e0008;
overflow: hidden;
color: #fff;
font-size: 14px
}
#sum {
width: 730px;
height: 730px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -365px;
margin-top: -365px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center
}
li {
text-align: center;
list-style-type: none
}
#second {
position: absolute;
width: 600px;
height: 600px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#second li {
position: absolute;
width: 80px;
height: 20px
}
#second ul {
position: relative;
left: -40px;
top: -10px
}
#minute {
position: absolute;
width: 500px;
height: 500px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#minute li {
position: absolute;
width: 80px;
height: 20px
}
#minute ul {
position: relative;
left: -40px;
top: -10px
}
#hour {
position: absolute;
width: 400px;
height: 400px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s
}
#hour li {
position: absolute;
width: 50px;
height: 20px
}
#hour ul {
position: relative;
left: -25px;
top: -10px
}
#shade {
position: absolute;
list-style-type: none;
background: rgba(11, 87, 187, .7);
width: 430px;
height: 28px;
left: 366px
}
#second ul li:nth-child(1) {
transform: rotate(0) translateX(400px)
}
#second ul li:nth-child(2) {
transform: rotate(6deg) translateX(400px)
}
#second ul li:nth-child(3) {
transform: rotate(12deg) translateX(400px)
}
#second ul li:nth-child(4) {
transform: rotate(18deg) translateX(400px)
}
#second ul li:nth-child(5) {
transform: rotate(24deg) translateX(400px)
}
#second ul li:nth-child(6) {
transform: rotate(30deg) translateX(400px)
}
#second ul li:nth-child(7) {
transform: rotate(36deg) translateX(400px)
}
#second ul li:nth-child(8) {
transform: rotate(42deg) translateX(400px)
}
#second ul li:nth-child(9) {
transform: rotate(48deg) translateX(400px)
}
#second ul li:nth-child(10) {
transform: rotate(54deg) translateX(400px)
}
#second ul li:nth-child(11) {
transform: rotate(60deg) translateX(400px)
}
#second ul li:nth-child(12) {
transform: rotate(66deg) translateX(400px)
}
#second ul li:nth-child(13) {
transform: rotate(72deg) translateX(400px)
}
#second ul li:nth-child(14) {
transform: rotate(78deg) translateX(400px)
}
#second ul li:nth-child(15) {
transform: rotate(84deg) translateX(400px)
}
#second ul li:nth-child(16) {
transform: rotate(90deg) translateX(400px)
}
#second ul li:nth-child(17) {
transform: rotate(96deg) translateX(400px)
}
#second ul li:nth-child(18) {
transform: rotate(102deg) translateX(400px)
}
#second ul li:nth-child(19) {
transform: rotate(108deg) translateX(400px)
}
#second ul li:nth-child(20) {
transform: rotate(114deg) translateX(400px)
}
#second ul li:nth-child(21) {
transform: rotate(120deg) translateX(400px)
}
#second ul li:nth-child(22) {
transform: rotate(126deg) translateX(400px)
}
#second ul li:nth-child(23) {
transform: rotate(132deg) translateX(400px)
}
#second ul li:nth-child(24) {
transform: rotate(138deg) translateX(400px)
}
#second ul li:nth-child(25) {
transform: rotate(144deg) translateX(400px)
}
#second ul li:nth-child(26) {
transform: rotate(150deg) translateX(400px)
}
#second ul li:nth-child(27) {
transform: rotate(156deg) translateX(400px)
}
#second ul li:nth-child(28) {
transform: rotate(162deg) translateX(400px)
}
#second ul li:nth-child(29) {
transform: rotate(168deg) translateX(400px)
}
#second ul li:nth-child(30) {
transform: rotate(174deg) translateX(400px)
}
#second ul li:nth-child(31) {
transform: rotate(180deg) translateX(400px)
}
#second ul li:nth-child(32) {
transform: rotate(186deg) translateX(400px)
}
#second ul li:nth-child(33) {
transform: rotate(192deg) translateX(400px)
}
#second ul li:nth-child(34) {
transform: rotate(198deg) translateX(400px)
}
#second ul li:nth-child(35) {
transform: rotate(204deg) translateX(400px)
}
#second ul li:nth-child(36) {
transform: rotate(210deg) translateX(400px)
}
#second ul li:nth-child(37) {
transform: rotate(216deg) translateX(400px)
}
#second ul li:nth-child(38) {
transform: rotate(222deg) translateX(400px)
}
#second ul li:nth-child(39) {
transform: rotate(228deg) translateX(400px)
}
#second ul li:nth-child(40) {
transform: rotate(234deg) translateX(400px)
}
#second ul li:nth-child(41) {
transform: rotate(240deg) translateX(400px)
}
#second ul li:nth-child(42) {
transform: rotate(246deg) translateX(400px)
}
#second ul li:nth-child(43) {
transform: rotate(252deg) translateX(400px)
}
#second ul li:nth-child(44) {
transform: rotate(258deg) translateX(400px)
}
#second ul li:nth-child(45) {
transform: rotate(264deg) translateX(400px)
}
#second ul li:nth-child(46) {
transform: rotate(270deg) translateX(400px)
}
#second ul li:nth-child(47) {
transform: rotate(276deg) translateX(400px)
}
#second ul li:nth-child(48) {
transform: rotate(282deg) translateX(400px)
}
#second ul li:nth-child(49) {
transform: rotate(288deg) translateX(400px)
}
#second ul li:nth-child(50) {
transform: rotate(294deg) translateX(400px)
}
#second ul li:nth-child(51) {
transform: rotate(300deg) translateX(400px)
}
#second ul li:nth-child(52) {
transform: rotate(306deg) translateX(400px)
}
#second ul li:nth-child(53) {
transform: rotate(312deg) translateX(400px)
}
#second ul li:nth-child(54) {
transform: rotate(318deg) translateX(400px)
}
#second ul li:nth-child(55) {
transform: rotate(324deg) translateX(400px)
}
#second ul li:nth-child(56) {
transform: rotate(330deg) translateX(400px)
}
#second ul li:nth-child(57) {
transform: rotate(336deg) translateX(400px)
}
#second ul li:nth-child(58) {
transform: rotate(342deg) translateX(400px)
}
#second ul li:nth-child(59) {
transform: rotate(348deg) translateX(400px)
}
#second ul li:nth-child(60) {
transform: rotate(354deg) translateX(400px)
}
#minute ul li:nth-child(1) {
transform: rotate(0) translateX(340px)
}
#minute ul li:nth-child(2) {
transform: rotate(6deg) translateX(340px)
}
#minute ul li:nth-child(3) {
transform: rotate(12deg) translateX(340px)
}
#minute ul li:nth-child(4) {
transform: rotate(18deg) translateX(340px)
}
#minute ul li:nth-child(5) {
transform: rotate(24deg) translateX(340px)
}
#minute ul li:nth-child(6) {
transform: rotate(30deg) translateX(340px)
}
#minute ul li:nth-child(7) {
transform: rotate(36deg) translateX(340px)
}
#minute ul li:nth-child(8) {
transform: rotate(42deg) translateX(340px)
}
#minute ul li:nth-child(9) {
transform: rotate(48deg) translateX(340px)
}
#minute ul li:nth-child(10) {
transform: rotate(54deg) translateX(340px)
}
#minute ul li:nth-child(11) {
transform: rotate(60deg) translateX(340px)
}
#minute ul li:nth-child(12) {
transform: rotate(66deg) translateX(340px)
}
#minute ul li:nth-child(13) {
transform: rotate(72deg) translateX(340px)
}
#minute ul li:nth-child(14) {
transform: rotate(78deg) translateX(340px)
}
#minute ul li:nth-child(15) {
transform: rotate(84deg) translateX(340px)
}
#minute ul li:nth-child(16) {
transform: rotate(90deg) translateX(340px)
}
#minute ul li:nth-child(17) {
transform: rotate(96deg) translateX(340px)
}
#minute ul li:nth-child(18) {
transform: rotate(102deg) translateX(340px)
}
#minute ul li:nth-child(19) {
transform: rotate(108deg) translateX(340px)
}
#minute ul li:nth-child(20) {
transform: rotate(114deg) translateX(340px)
}
#minute ul li:nth-child(21) {
transform: rotate(120deg) translateX(340px)
}
#minute ul li:nth-child(22) {
transform: rotate(126deg) translateX(340px)
}
#minute ul li:nth-child(23) {
transform: rotate(132deg) translateX(340px)
}
#minute ul li:nth-child(24) {
transform: rotate(138deg) translateX(340px)
}
#minute ul li:nth-child(25) {
transform: rotate(144deg) translateX(340px)
}
#minute ul li:nth-child(26) {
transform: rotate(150deg) translateX(340px)
}
#minute ul li:nth-child(27) {
transform: rotate(156deg) translateX(340px)
}
#minute ul li:nth-child(28) {
transform: rotate(162deg) translateX(340px)
}
#minute ul li:nth-child(29) {
transform: rotate(168deg) translateX(340px)
}
#minute ul li:nth-child(30) {
transform: rotate(174deg) translateX(340px)
}
#minute ul li:nth-child(31) {
transform: rotate(180deg) translateX(340px)
}
#minute ul li:nth-child(32) {
transform: rotate(186deg) translateX(340px)
}
#minute ul li:nth-child(33) {
transform: rotate(192deg) translateX(340px)
}
#minute ul li:nth-child(34) {
transform: rotate(198deg) translateX(340px)
}
#minute ul li:nth-child(35) {
transform: rotate(204deg) translateX(340px)
}
#minute ul li:nth-child(36) {
transform: rotate(210deg) translateX(340px)
}
#minute ul li:nth-child(37) {
transform: rotate(216deg) translateX(340px)
}
#minute ul li:nth-child(38) {
transform: rotate(222deg) translateX(340px)
}
#minute ul li:nth-child(39) {
transform: rotate(228deg) translateX(340px)
}
#minute ul li:nth-child(40) {
transform: rotate(234deg) translateX(340px)
}
#minute ul li:nth-child(41) {
transform: rotate(240deg) translateX(340px)
}
#minute ul li:nth-child(42) {
transform: rotate(246deg) translateX(340px)
}
#minute ul li:nth-child(43) {
transform: rotate(252deg) translateX(340px)
}
#minute ul li:nth-child(44) {
transform: rotate(258deg) translateX(340px)
}
#minute ul li:nth-child(45) {
transform: rotate(264deg) translateX(340px)
}
#minute ul li:nth-child(46) {
transform: rotate(270deg) translateX(340px)
}
#minute ul li:nth-child(47) {
transform: rotate(276deg) translateX(340px)
}
#minute ul li:nth-child(48) {
transform: rotate(282deg) translateX(340px)
}
#minute ul li:nth-child(49) {
transform: rotate(288deg) translateX(340px)
}
#minute ul li:nth-child(50) {
transform: rotate(294deg) translateX(340px)
}
#minute ul li:nth-child(51) {
transform: rotate(300deg) translateX(340px)
}
#minute ul li:nth-child(52) {
transform: rotate(306deg) translateX(340px)
}
#minute ul li:nth-child(53) {
transform: rotate(312deg) translateX(340px)
}
#minute ul li:nth-child(54) {
transform: rotate(318deg) translateX(340px)
}
#minute ul li:nth-child(55) {
transform: rotate(324deg) translateX(340px)
}
#minute ul li:nth-child(56) {
transform: rotate(330deg) translateX(340px)
}
#minute ul li:nth-child(57) {
transform: rotate(336deg) translateX(340px)
}
#minute ul li:nth-child(58) {
transform: rotate(342deg) translateX(340px)
}
#minute ul li:nth-child(59) {
transform: rotate(348deg) translateX(340px)
}
#minute ul li:nth-child(60) {
transform: rotate(354deg) translateX(340px)
}
#hour ul li:nth-child(1) {
transform: rotate(0deg) translateX(290px)
}
#hour ul li:nth-child(2) {
transform: rotate(30deg) translateX(290px)
}
#hour ul li:nth-child(3) {
transform: rotate(60deg) translateX(290px)
}
#hour ul li:nth-child(4) {
transform: rotate(90deg) translateX(290px)
}
#hour ul li:nth-child(5) {
transform: rotate(120deg) translateX(290px)
}
#hour ul li:nth-child(6) {
transform: rotate(150deg) translateX(290px)
}
#hour ul li:nth-child(7) {
transform: rotate(180deg) translateX(290px)
}
#hour ul li:nth-child(8) {
transform: rotate(210deg) translateX(290px)
}
#hour ul li:nth-child(9) {
transform: rotate(240deg) translateX(290px)
}
#hour ul li:nth-child(10) {
transform: rotate(270deg) translateX(290px)
}
#hour ul li:nth-child(11) {
transform: rotate(300deg) translateX(290px)
}
#hour ul li:nth-child(12) {
transform: rotate(330deg) translateX(290px)
}
二、做好的网页效果,如何通过发链接给别人看?
1.1 解决部署上线~> 部署上线工具(可永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
三、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
四、❉ 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、❉更多表白源码
版权声明：本文为ruanjiafeng2013原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。