网站安全检测中心,中捷贴吧,北京开发公司,搜索引擎网站开发js css3制作全屏的轮盘时钟#xff0c;时间轮盘旋转动画特效#xff0c;先来看看效果#xff1a; 一部分关键的代码如下#xff1a;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewpo… js css3制作全屏的轮盘时钟时间轮盘旋转动画特效先来看看效果 一部分关键的代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylefont-face {font-family: unidreamLED;src: url(./UnidreamLED.ttf)/* src: url(./UnidreamLED.ttf); */}body{font-size: 0px;height: 100%;width: 100%;padding: 0;margin: 0;position: absolute;display: flex;justify-content: center;align-items: center;color: #cad6dd;overflow: hidden;background-color: #141929;font-family: unidreamLED;}.NowData{background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));background-size: 100% 20px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.yearBox{height: 10vh;width: 10vh;position: absolute;display: flex;font-size: 16px;align-items: center;justify-content: center;border-radius: 50%;transition: 1s;background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));background-size: 100% 20px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.mounthBox{height: 25vh;width: 25vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;}.dayBox{height: 40vh;width: 40vh;border-radius: 50%;display: flex;align-items: center;position: absolute;transition: 1s;}.hourBox{height: 55vh;width: 55vh;position: absolute;display: flex;align-items: center;transition: 1s;border-radius: 50%;}.minuteBox{height: 70vh;width: 70vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;}.secondBox{height: 85vh;width: 85vh;display: flex;align-items: center;position: absolute;border-radius: 50%;transition: 1s;}/style
/head
bodydiv classsecondBox/divdiv classminuteBox/divdiv classhourBox/divdiv classdayBox/divdiv classmounthBox/divdiv classyearBox/divscriptlet sencond for(i0;i60;i){let onediv div id sencond${i1} stylefont-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i-1)*-6}deg); ${i1} 秒/divsencond sencond onediv}document.querySelector(.secondBox).innerHTML sencondlet minute for(i0;i60;i){let onediv div id minute${i1} stylefont-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-6}deg); ${i1} 分/divminute minute onediv}document.querySelector(.minuteBox).innerHTML minutelet hour for(i0;i24;i){let onediv div id hour${i1} stylefont-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-15}deg); ${i1} 时/divhour hour onediv}document.querySelector(.hourBox).innerHTML hourlet day for(i0;i31;i){let onediv div id day${i1} stylefont-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-11.25}deg); ${i1} 日/divday day onediv}document.querySelector(.dayBox).innerHTML daylet mounth for(i0;i12;i){let onediv div id mounth${i1} stylefont-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-30}deg); ${i1} 月/divmounth mounth onediv}document.querySelector(.mounthBox).innerHTML mounthvar sencond360 0var Minute360 0var hour360 0var day360 0var mounth360 0var oldsencond 0var oldMinute 0var oldhour 0var oldday 0var oldmounth 0function transformBox(){let nowDate new Date()let sencond nowDate.getSeconds()let minute nowDate.getMinutes()let hour nowDate.getHours()let day nowDate.getDate()let mounth nowDate.getMonth()let year nowDate.getFullYear()if(sencond 0 oldsencond ! sencond){sencond360 sencond360 1 }if(minute 0 oldMinute ! minute){Minute360 Minute360 1}if(hour 0 oldhour ! hour){hour360 hour360 1}if(day 1 oldday ! day){day360 day360 1}if(mounth 0 oldmounth ! mounth){mounth360 mounth360 1}document.querySelector(.secondBox).style.transform rotate(${sencond360*360 (sencond-1)*6}deg)document.querySelector(.minuteBox).style.transform rotate(${Minute360*360 (minute-1)*6}deg)document.querySelector(.hourBox).style.transform rotate(${hour360*360 (hour-1)*15}deg)document.querySelector(.dayBox).style.transform rotate(${day360*360 (day-1)*11.25}deg)document.querySelector(.mounthBox).style.transform rotate(${mounth360*360 (mounth)*30}deg)document.querySelector(.yearBox).innerHTML year 年let nowDates document.querySelectorAll(.NowData)nowDates.forEach(element {element.classList});document.querySelector(#sencond${sencond1}).classListNowDatadocument.querySelector(#minute${minute0?60:minute}).classListNowDatadocument.querySelector(#hour${hour0?24:hour}).classListNowDatadocument.querySelector(#day${day}).classListNowDatadocument.querySelector(#mounth${mounth1}).classListNowDataoldsencond sencondoldMinute minuteoldhour houroldday dayoldmounth mounth}transformBox()setInterval(() {transformBox()}, 1000);
/script/body
/html 全部代码创意的时间轮盘时钟特效.zip
