用圓錐梯度的臉進行實時時鐘

> > > > > > > > > > > > > > > > > >

但是，圓錐梯度雖然強大，但經常被忽略。本教程演示了創建一個獨特的時鐘面，利用了圓錐梯度的功能。

了解圓錐梯度

圓錐梯度創建圍繞中心點旋轉的顏色轉變，從而支持多種顏色值。至關重要的是， value conic-gradient（）函數定義旋轉或起點。這個角度甚至可以是負面的Ity，因為它是標準時鐘手標）。

接下來，我們使用CSS來對時鐘進行樣式，並採用CSS變量來輕鬆自定義。這些變量將通過JavaScript動態更新。

 .clock {/ *時鐘變量 */ - 小時式顏色：＃000; - 小時級：0DEG; - 小手下：＃000; - 少數級：0DEG; - 二手顏色：熱培林； - 秒級：0DEG;位置：相對；最小寬度：320px;寬度：25VW;身高：25VW;最小值：320px;邊界拉迪烏斯：50％；保證金：0自動；邊界：7px實心＃000; }/ *時鐘手樣式 */.HAND {/ * ...（簡短而省略了手動樣式）... */} } 

transform-origin 屬性屬性確保正確的手旋轉。自定義屬性管理手角，通過JavaScript進行更新以進行準確的計時。

實現JavaScript Logic

我們選擇時鍾元素並定義 setDate（setDate（）函數：

 <pre class="brush:php;toolbar:false"> pre> pre> pre> const const const const = document.getElementbyId.getElementbyId（clock）clock clock（“ clock）”）;函數setDate（）{//時間計算和手角更新} setDate（）; //初始設置

內部 setDate（），我們使用 date（）：

 const now now = now = new Date（）; const secondSangle = now.getSeconds（） * 6; const minsangle = now.getMinutes（） * 6秒 / 60; const hourangle =（（NOW.Gethours（）％12） / 12） * 360分鐘 / 12;  <p>計算確保准確的手部定位，佔幾秒鐘，分鐘和小時的時間。然後，我們更新CSS變量：</p> <pre class="brush:php;toolbar:false"> clock.style.setproperty（“  - 二手級”，secondSangle“ deg”）; clock.Style.setProperty（“  - 微小的degrees”，minsangle“ deg”）; clock.Style.setProperty（“  - 小時degrees”，hourangle“ deg”）; 

最後， set> set> set> setDate（setDate，1000）每秒更新時鐘。

conic漸變{ / * ...（以前的樣式）... * / - start：0deg; - 端：0DEG;背景：圓錐級別（來自var（ - start），RGB（255 255 255）2DEG，RGB（0 0 0 / 0.5）var（-end），RGB（255 255 255）2DEG，RGB（0 0 0 / 0.7））; }

我們介紹 - start 和 - end 變量以控制梯度的開始和結束角。 setDate（）函數已更新以計算和設置這些變量，處理 minsangle 超過 hourangle 的處理案例，使用無縫過渡的負角度。 （為簡潔而省略了梯度角度計算的JavaScript代碼，因為它是的直接更新 - start 和 - 基於<code> minsangle 和 hourangle hourangle ）。

）。嘗試不同的配色方案和样式來創建自己獨特的時鐘設計。

以上是用圓錐梯度的臉進行實時時鐘的詳細內容。更多資訊請關注PHP中文網其他相關文章！