欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實(shí)現(xiàn)簡(jiǎn)單的翻轉(zhuǎn)時(shí)鐘效果

  發(fā)布時(shí)間：2023-05-24 16:17:24   作者： gmx_white   我要評(píng)論
今天給大家分享一個(gè)翻轉(zhuǎn)時(shí)鐘的特效，時(shí)間每過(guò)一秒，相應(yīng)的位置就會(huì)像翻日歷一樣翻過(guò)去，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求

時(shí)分秒為翻轉(zhuǎn)卡片，與系統(tǒng)時(shí)間同步翻轉(zhuǎn)

效果圖

實(shí)現(xiàn)步驟

卡片翻轉(zhuǎn)

1.用四個(gè)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表示下一個(gè)數(shù)，.card和.card4表示當(dāng)前展示數(shù)字

初始狀態(tài)：

  • card1為下一個(gè)數(shù)的上半部分，card2為下半部分，card2翻轉(zhuǎn)疊在card1上；
  • card3為當(dāng)前數(shù)的上半部分,card4為當(dāng)前數(shù)的下半部分，card3疊在card1，card2上。

翻轉(zhuǎn)卡片示意圖.png

翻轉(zhuǎn)原理：

  • card2向下(面向自己)旋轉(zhuǎn)到0deg，即卡片的下半部分；
  • card3向下旋轉(zhuǎn)到-180deg，即卡片的下半部分(背面對(duì)著自己)；
  • card2與card3同步旋轉(zhuǎn)
  • 旋轉(zhuǎn)結(jié)束后，card1和card2在上面(層級(jí)顯示)，card4被card3蓋住，card3背對(duì)，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è)置行高后，半邊字溢出，將其隱藏起來(lái)*/
};
/*通用樣式設(shè)置之后，card1與card2位置疊在一起, 將card2往下移
.card2 {
 top: 50%; /* 下移 */
 line-height: 0; /* 調(diào)整下半邊的字 */
 margin-top: 1px;
}

2. 設(shè)置card2的初始狀態(tài)

backface-visibility: hidden; /* 背面不可見(jiàn) */
z-index: 2; /* 調(diào)整層級(jí)，以免翻轉(zhuǎn)時(shí)被card4蓋住 */
transform-origin: center top; /* 旋轉(zhuǎn)中心為卡片中心，即銜接的中心 */
transform:rotateX(180deg); /* 旋轉(zhuǎn)， tops: 為了有3d效果，可以為父元素加perspective*/

3. card2的旋轉(zhuǎn)動(dòng)畫

@keyframes flip {
    to {
        transform: rotateX(0deg);
    }
}

4. card3的旋轉(zhuǎn)動(dòng)畫

類似的樣式設(shè)置不再贅述。

@keyframes flip1 {
    to {
        transform: rotateX(180deg);
    }
}

5. 為卡片加上無(wú)限動(dòng)畫，時(shí)間為1s

/* backwards: 一次動(dòng)畫后，回到動(dòng)畫開始前的狀態(tài)*/
animation: flip1 1s ease-in-out backwards infinite;

至此，單個(gè)卡片的旋轉(zhuǎn)就完成了，也就是時(shí)鐘里秒部分結(jié)束。

時(shí)分翻轉(zhuǎn)

在前面卡片翻轉(zhuǎn)中，設(shè)置動(dòng)畫持續(xù)時(shí)間為1s，正好對(duì)應(yīng)秒表。但是，對(duì)于一分鐘(一小時(shí))更新一次的分表(時(shí)表)，動(dòng)畫需要進(jìn)行暫停以及有條件的開啟。

時(shí)分表和秒表具有相同的html結(jié)構(gòu)以及css樣式，以下是基于秒表結(jié)構(gòu)的改變：

動(dòng)畫初始化為暫停狀態(tài)

animation-play-state: paused;

2. 監(jiān)聽秒表動(dòng)畫的每一次結(jié)束，計(jì)算當(dāng)前時(shí)間以及下一秒的時(shí)間，如果下一秒時(shí)分需要變化，則為其開啟動(dòng)畫

/* 獲取時(shí)分秒的各個(gè)元素 */
doms = {
    second1: ..., // 秒表的card1
    second2: ...,  // 秒表的card2
    container: ..., // 父元素
}
second2.addEventListener('animationiteration', function (e) {
   changeTime(); // 獲取更改當(dāng)前時(shí)間以及下一秒時(shí)間函數(shù)
   doms.second1.innerHTML = zeroFormat(nextSecond); // 頁(yè)面元素值替換為下一秒的值
   doms.second2.innerHTML = zeroFormat(nextSecond); // zeroFormat為補(bǔ)0函數(shù)
   doms.second3.innerHTML = zeroFormat(nowSecond);
   doms.second4.innerHTML = zeroFormat(nowSecond);
   if (nextMinute !== nowMinute) { // 如果下一秒需要改變分鐘, 開啟分表的card2和card3動(dòng)畫
   doms.minute2.style.animationPlayState = "running";
   doms.minute3.style.animationPlayState = "running";
   }
   if (nowHour !== nowHour) {
   doms.hour2.style.animationPlayState = "running";
   doms.hour3.style.animationPlayState = "running";
   }
})

3. 動(dòng)畫開啟，執(zhí)行一秒后，分/時(shí)表的動(dòng)畫需要再次暫停。為了代碼不冗余，使用事件代理，對(duì)上述代碼進(jìn)行改造。1. 如果觸發(fā)animationiteration事件的是秒表元素，則改變秒表卡片的數(shù)字，判斷時(shí)分是否需要變化，需要變化則開啟動(dòng)畫，對(duì)應(yīng)changeAnimationState函數(shù)。2. 如果觸發(fā)的是時(shí)/分表元素，則表示時(shí)/分表動(dòng)畫結(jié)束，需要暫停響應(yīng)的動(dò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";
 }
}

為了簡(jiǎn)單，設(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();
}

至此，時(shí)/分/秒表的翻轉(zhuǎn)功能基本上就實(shí)現(xiàn)了。

時(shí)鐘初始化

頁(yè)面剛進(jìn)入，需要獲取當(dāng)前時(shí)間進(jìn)行渲染，監(jiān)聽onload事件

// 分別為時(shí)分秒卡片設(shè)置當(dāng)前顯示值，以及被覆蓋的下一翻轉(zhuǎn)顯示值
window.onload = function () {
  changeTime(); // 獲取時(shí)間
  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個(gè)卡片元素(.card-item)，可能會(huì)有更好的解決翻轉(zhuǎn)的方式分別獲取了12個(gè)元素對(duì)應(yīng)的dom，并對(duì)其innerHtml進(jìn)行了修改(有點(diǎn)傻)卡片可以抽離為組件，思考：如何設(shè)計(jì)組件的接收屬性，可以適配時(shí)/分/秒

翻轉(zhuǎn)時(shí)鐘完整代碼見(jiàn)https://github.com/gmx-white/css-wheel

到此這篇關(guān)于css實(shí)現(xiàn)簡(jiǎn)單的翻轉(zhuǎn)時(shí)鐘效果的文章就介紹到這了,更多相關(guān)css翻轉(zhuǎn)時(shí)鐘內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論