css實(shí)現(xiàn)簡單的翻轉(zhuǎn)時鐘效果
我要評論需求
時分秒為翻轉(zhuǎn)卡片，與系統(tǒng)時間同步翻轉(zhuǎn)
效果圖
實(shí)現(xiàn)步驟
卡片翻轉(zhuǎn)
1.用四個div模擬翻轉(zhuǎn)卡片
<div class="card-container"> <div class="card-item card1">1</div> <div class="card-item card2">1</div> <div class="card-item card3">0</div> <div class="card-item card4">0</div> </div>
2. .card1和.card2表示下一個數(shù)，.card和.card4表示當(dāng)前展示數(shù)字
初始狀態(tài)：
card1為下一個數(shù)的上半部分，card2為下半部分，card2翻轉(zhuǎn)疊在card1上；card3為當(dāng)前數(shù)的上半部分,card4為當(dāng)前數(shù)的下半部分，card3疊在card1，card2上。
翻轉(zhuǎn)原理：
card2向下(面向自己)旋轉(zhuǎn)到0deg，即卡片的下半部分；card3向下旋轉(zhuǎn)到-180deg，即卡片的下半部分(背面對著自己)；- card2與card3同步旋轉(zhuǎn)
- 旋轉(zhuǎn)結(jié)束后，card1和card2在上面(層級顯示)，card4被card3蓋住，card3背對，card2正面顯示
3.搞明白div是如何翻轉(zhuǎn)之后，設(shè)置css樣式
數(shù)字分為上半部分和下半部分，以card1和card2為例。
.card-item { /* 公共樣式 */
width: 100%;
height: 50%;
background-color: #000;
position: absolute; /* 相同的位置，半張卡片重疊 */
color: #fff;
text-align: center;
font-size: 10em;
line-height: 200px; /*設(shè)置行高，字體在盒子里的位置將變化*/
overflow: hidden; /*設(shè)置行高后，半邊字溢出，將其隱藏起來*/
};
/*通用樣式設(shè)置之后，card1與card2位置疊在一起, 將card2往下移
.card2 {
top: 50%; /* 下移 */
line-height: 0; /* 調(diào)整下半邊的字 */
margin-top: 1px;
}
2. 設(shè)置card2的初始狀態(tài)
backface-visibility: hidden; /* 背面不可見 */ z-index: 2; /* 調(diào)整層級，以免翻轉(zhuǎn)時被card4蓋住 */ transform-origin: center top; /* 旋轉(zhuǎn)中心為卡片中心，即銜接的中心 */ transform:rotateX(180deg); /* 旋轉(zhuǎn)， tops: 為了有3d效果，可以為父元素加perspective*/
3. card2的旋轉(zhuǎn)動畫
@keyframes flip {
to {
transform: rotateX(0deg);
}
}
4. card3的旋轉(zhuǎn)動畫
類似的樣式設(shè)置不再贅述。
@keyframes flip1 {
to {
transform: rotateX(180deg);
}
}
5. 為卡片加上無限動畫，時間為1s
/* backwards: 一次動畫后，回到動畫開始前的狀態(tài)*/ animation: flip1 1s ease-in-out backwards infinite;
至此，單個卡片的旋轉(zhuǎn)就完成了，也就是時鐘里秒部分結(jié)束。
時分翻轉(zhuǎn)
在前面卡片翻轉(zhuǎn)中，設(shè)置動畫持續(xù)時間為1s，正好對應(yīng)秒表。但是，對于一分鐘(一小時)更新一次的分表(時表)，動畫需要進(jìn)行暫停以及有條件的開啟。
時分表和秒表具有相同的html結(jié)構(gòu)以及css樣式，以下是基于秒表結(jié)構(gòu)的改變：
動畫初始化為暫停狀態(tài)
animation-play-state: paused;
2. 監(jiān)聽秒表動畫的每一次結(jié)束，計(jì)算當(dāng)前時間以及下一秒的時間，如果下一秒時分需要變化，則為其開啟動畫
/* 獲取時分秒的各個元素 */
doms = {
second1: ..., // 秒表的card1
second2: ..., // 秒表的card2
container: ..., // 父元素
}
second2.addEventListener('animationiteration', function (e) {
changeTime(); // 獲取更改當(dāng)前時間以及下一秒時間函數(shù)
doms.second1.innerHTML = zeroFormat(nextSecond); // 頁面元素值替換為下一秒的值
doms.second2.innerHTML = zeroFormat(nextSecond); // zeroFormat為補(bǔ)0函數(shù)
doms.second3.innerHTML = zeroFormat(nowSecond);
doms.second4.innerHTML = zeroFormat(nowSecond);
if (nextMinute !== nowMinute) { // 如果下一秒需要改變分鐘, 開啟分表的card2和card3動畫
doms.minute2.style.animationPlayState = "running";
doms.minute3.style.animationPlayState = "running";
}
if (nowHour !== nowHour) {
doms.hour2.style.animationPlayState = "running";
doms.hour3.style.animationPlayState = "running";
}
})
3. 動畫開啟，執(zhí)行一秒后，分/時表的動畫需要再次暫停。為了代碼不冗余，使用事件代理，對上述代碼進(jìn)行改造。1. 如果觸發(fā)animationiteration事件的是秒表元素，則改變秒表卡片的數(shù)字，判斷時分是否需要變化，需要變化則開啟動畫，對應(yīng)changeAnimationState函數(shù)。2. 如果觸發(fā)的是時/分表元素，則表示時/分表動畫結(jié)束，需要暫停響應(yīng)的動畫，并改變卡片的數(shù)字
doms.container.addEventListener("animationiteration", function (e) {
if (e.target.classList.contains("second")) {
changeAnimationState();
} else if (e.target.classList.contains("minute")) {
doms.minute1.innerHTML = zeroFormat(nextMinute === 59 ? 0 : nextMinute + 1);
doms.minute2.innerHTML = zeroFormat(nextMinute === 59 ? 0 : nextMinute + 1);
doms.minute3.innerHTML = zeroFormat(nextMinute);
doms.minute4.innerHTML = zeroFormat(nextMinute);
e.target.style.animationPlayState = "paused";
} else {
doms.hour1.innerHTML = zeroFormat(nextHour === 23 ? 0 : nextHour + 1);
doms.hour2.innerHTML = zeroFormat(nextHour === 23 ? 0 : nextHour + 1);
doms.hour3.innerHTML = zeroFormat(nextHour);
doms.hour4.innerHTML = zeroFormat(nextHour);
e.target.style.animationPlayState = "paused";
}
});
function changeAnimationState() {
changeTime();
doms.second1.innerHTML = zeroFormat(nextSecond);
doms.second2.innerHTML = zeroFormat(nextSecond);
doms.second3.innerHTML = zeroFormat(nowSecond);
doms.second4.innerHTML = zeroFormat(nowSecond);
if (nextMinute !== nowMinute) {
doms.minute2.style.animationPlayState = "running";
doms.minute3.style.animationPlayState = "running";
}
if (nowHour !== nowHour) {
doms.hour2.style.animationPlayState = "running";
doms.hour3.style.animationPlayState = "running";
}
}
為了簡單，設(shè)定全局元素nowSecond, nextSecond, nowMinute, nextMinute, nowHour, nextHour
function changeTime() {
var now = new Date();
var next = new Date(now.getTime() + 1000);
nowSecond = now.getSeconds();
nextSecond = next.getSeconds();
nowMinute = now.getMinutes();
nextMinute = next.getMinutes();
nowHour = now.getHours();
nextHour = next.getHours();
}
至此，時/分/秒表的翻轉(zhuǎn)功能基本上就實(shí)現(xiàn)了。
時鐘初始化
頁面剛進(jìn)入，需要獲取當(dāng)前時間進(jìn)行渲染，監(jiān)聽
onload事件
// 分別為時分秒卡片設(shè)置當(dāng)前顯示值，以及被覆蓋的下一翻轉(zhuǎn)顯示值
window.onload = function () {
changeTime(); // 獲取時間
doms.second1.innerHTML = zeroFormat(nextSecond);
doms.second2.innerHTML = zeroFormat(nextSecond);
doms.second3.innerHTML = zeroFormat(nowSecond);
doms.second4.innerHTML = zeroFormat(nowSecond);
doms.minute1.innerHTML = zeroFormat(nextMinute);
doms.minute2.innerHTML = zeroFormat(nextMinute);
doms.minute3.innerHTML = zeroFormat(nowMinute);
doms.minute4.innerHTML = zeroFormat(nowMinute);
doms.hour1.innerHTML = zeroFormat(nextHour);
doms.hour2.innerHTML = zeroFormat(nextHour);
doms.hour3.innerHTML = zeroFormat(nowHour);
doms.hour4.innerHTML = zeroFormat(nowHour);
};
所有功能實(shí)現(xiàn)完畢！
不足一共使用了12個卡片元素(.card-item)，可能會有更好的解決翻轉(zhuǎn)的方式分別獲取了12個元素對應(yīng)的dom，并對其innerHtml進(jìn)行了修改(有點(diǎn)傻)卡片可以抽離為組件，思考：如何設(shè)計(jì)組件的接收屬性，可以適配時/分/秒
翻轉(zhuǎn)時鐘完整代碼見https://github.com/gmx-white/css-wheel
到此這篇關(guān)于css實(shí)現(xiàn)簡單的翻轉(zhuǎn)時鐘效果的文章就介紹到這了,更多相關(guān)css翻轉(zhuǎn)時鐘內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(shí)現(xiàn)漂亮的時鐘動畫效果的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)漂亮的時鐘動畫效果的實(shí)例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-29
