1、18教你用css實現漂亮的時鐘動畫.18猜猜上面的時鐘是怎么制作的？想不想只用一個CSS就實現這么炫酷的動畫呢？還不快來學習吧！如果只是需要代碼，記得點個start喲！我要找工作1818預先準備：。首先這個動畫，是根據之前的Loading動畫制作的，這些的思路都是一樣的，在這個動畫上進行了一次創新。預習知識點：e：“var()和calc()的使用“flex布局的場景“多個動畫操作“延遲動畫的使用開始：1234核心代碼分析:transform:rotate(calc(30deg*var(-i);transform-origin:0250px;animation:rotate5slinearinf

2、inite;animation-delay:calc(0.42s*var(-i);18“根據在HTML上搭建的style樣式，獲取每個對應的i值，分別計算每個時刻盒子的旋轉度數，同時我們更改他們的初始旋轉點，不然每個都只是中心旋轉，轉成了一個圓形。思路還是loading的制作思路，只不過這次尺寸比例放大了，1182345678910111213141516)1113141516123456789101112ess代碼:*margin:0px;padding:0px;box-sizing:border-box;bodybackground:-webkit-linear-gradient(left

3、top,pink,rgb(90,83,83);display:flex;min-height:100vh;justify-content:center;align-items:center;sectionheight:500px;width:500px;.boxposition:relative;height:500px;192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384height

4、:500px;width:500px;display:flex;justify-content:center;align-items:center;border:5pxsolid#e2adb6border-radius:50%;/border:2pxsolidred;&:hover.coloranimation-play-state:paused;&:aftercontent:;display:block;height:25px;width:25px;background-color:#000;z-index:4;border-radius:50%;keyframesrotate0%,50%t

5、ext-shadow:none;color:#000;transform:rotate(calc(30deg*var(-i)scale(1);50.1%,100%text-shadow:0010px#000,0015px#000;color:#fff;transform:rotate(calc(30deg*var(-i)scale(1.01);.colorposition:absolute;top:0;color:#f2f2f2;opacity:.6;font-size:20px;transform:rotate(calc(30deg*var(-i);transform-origin:0250

6、px;line-height:50px;animation:rotate5slinearinfinite;animation-delay:calc(0.42s*var(-i);keyframeschange10%transform:translateY(-50%)rotate(0deg);transform-origin:0100px;100%transform:translateY(-50%)rotate(360deg);transform-origin:0100px;keyframeschange20%0%0%transform:translateY(-50%)rotate(-30deg)

7、rotate(Odeg);transform-origin:0150px;100%transform:translateY(-50%)rotate(-30deg)rotate(360deg);transform-origin:0150px;.hoursposition:absolute;top:40%;width:5px;transform:translateY(-50%);height:100px;background-color:#f2f2f2;animation:change124slinearinfinite;&:aftercontent:;position:absolute;top:

8、0;left:-10px;width:20px;height:20px;border-bottom:5pxsolid#f2f2f2;border-right:5pxsolid#f2f2f2;transform:rotate(-135deg);.mintuesposition:absolute;top:36%;width:3px;height:150px;background-color:#000;transform:translateY(-50%)rotate(-30deg);transform-origin:0150px;animation:change22slinearinfinite;&:aftercontent:;position:absolute;top:0;left:-10px;/display:block;width:20px;height:20px;border-bottom:3pxsolid#000;border-right:3pxsolid#000;transform:rotate(-135deg);8485868788899091929394959