抖音时钟原生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号 获取更多源码 !