如何只用CSS做倒計時效果

前言

此方法在react-native當中有bug。因為用到的屬性在安卓手機上不支持。。。
下面我要說的很簡單,當當當~~~

1. 畫左邊的圓

首先 要有這么一個想法,一個div包裹這一個div
<div> <div> </div> </div>
父div他的寬度應該是子div寬度的一半。這樣給子div一個border-radius給父div一個overflow:hidden
這樣正好會是一個半圓。

2.畫右半邊的圓

又半邊的圓同上述所說的。

3.兩個半圓結合在一起

兩個半圓結合在就是兩個圓并排放,那么個這兩個半圓 一個position:absolute。這樣兩個半圓浮動在文檔流當中。就結合成一個圓。

4.將兩個半圓隱藏掉

這一步因人而異。有些需求的倒計時 要求從沒有到完整的一個圓的倒計時,而有的倒計時,要求從完整到0的一個倒計時過程。
如果是要求從0到完整的一個倒計時,那么我們此時需要把這個圓隱藏掉
我們可以通過transform隱藏掉。因為父級的寬度是子級寬度的一半,所以我們可以計算出,當子級的圓旋轉180度的時候,整個圓就不見,全都會通過hidden英藏在外面。同理可得另一半邊圓。

5.動畫

這個動畫就比較簡單,那就是 一個從0-180度的一個動畫。

在這里,我是借鑒了一篇博客給了我啟發(fā)做這些。可以通過這些變換出很多的
同時,我的代碼傳到github

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,093評論 1 92
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,103評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,423評論 0 11
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,781評論 25 709
  • 檢測刪除微信好友的人是什么心理? 昨天我收到一條微信:內容是感謝您一直把我留在您的好友里,正在檢測刪除我的人,勿回...

友情鏈接更多精彩內容