前言

今年Apple推出了搭載M2芯片的新款MacBook Pro和MacBook Air，得到消息第一時(shí)間也是去Apple官網(wǎng)看看介紹，看看他們的產(chǎn)品網(wǎng)頁(yè)，這次沒有什么特別的，但是有個(gè)電池續(xù)航20小時(shí)的文字有一個(gè)充電的效果

今天就來實(shí)現(xiàn)這個(gè)充電的效果，并且使用到了CSS的新函式clamp()

實(shí)現(xiàn)充電效果

在HTML部分使用亂數(shù)假文自動(dòng)生成隨機(jī)文本

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>

然后加入body選擇器，用Flexbox的方法將內(nèi)容上下左右居中，設(shè)定背景顏色為黑色

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

然后加入h1選擇器，文字先設(shè)為白色，寬度設(shè)為50%，將字距收窄一點(diǎn)，使用letter-spacing設(shè)為-3px

h1{
  color: #fff;
  width: 50%
  margin: 0 auto;
  font-family: Helvetica;
  font-size: 60px;
  letter-spacing: -3px;
}

要做到充電的效果關(guān)乎到兩個(gè)顏色，白色和綠色，這里使用linear-gradient()去達(dá)到

h1選擇器加入background-image（漸層顏色是套用background-image而不是background-color），使用linear-gradient()，先設(shè)定白色50%，然后綠色50%

h1{
  background-image: linear-gradient(#fff 50%,#4cd265 50%);
}

然后加上background-clip: text，以文字作為遮罩，再將文字設(shè)為透明色color: transparent

h1選擇器定義一個(gè)CSS變量 --progress：0，在0的時(shí)候文字是全白色，1的時(shí)候是全綠色，然后將兩個(gè)50%的值替換成calc()計(jì)算，將--progress改為0.5看看效果

--progress:0.5;

background-image: linear-gradient(#fff calc(100% - calc(var(--progress) * 100%)),#4cd265 calc(100% - calc(var(--progress) * 100%)));

但是就這樣效果就有點(diǎn)寡，在充滿電的時(shí)候?qū)⑽淖址糯笠恍?，放大使?code>transform：scale（1.3），充電的完成度完全由--progress控制，當(dāng)--progress小于1的時(shí)候scale()設(shè)為1，等于1的時(shí)候scale()設(shè)為1.3，但是css沒有if判斷式可以用

這里使用一個(gè)新的css函式clamp()，這個(gè)函式接收三個(gè)值，第一個(gè)值最小值，我們填1，第三個(gè)值最大值，我們填3，而第二個(gè)值，如果少于1的話結(jié)果就是1，如果大于1.3結(jié)果就是1.3，如果在1和1.3之間的話，結(jié)果就是第二個(gè)值設(shè)定值

假設(shè)每次充電都加0.01，即100充滿電，通過calc()，var(--progress)-0.99再乘一個(gè)比較大的值，--progress在0.99或以下的時(shí)候scale()為1，--progress為1時(shí)scale()為1.3，再加入一個(gè)動(dòng)畫的過渡

transform: scale(clamp(1,calc((var(--progress)-0.99) * 200),1.3));
transition: .3s transform ease-out;

最后，就是處理觸發(fā)動(dòng)畫的部分了，定義一個(gè)變量progress，然后定義一個(gè)run函數(shù)，里面判斷如果progress少于1的話progress加0.01，為了確保計(jì)算的精度準(zhǔn)確，先用toFixed(2)轉(zhuǎn)換為兩個(gè)小數(shù)位再用parseFloat()轉(zhuǎn)換為數(shù)字，然后通過setProperty()將progress設(shè)定到css變量中，再加一個(gè)setTimeout()，每隔20毫秒就執(zhí)行一次run函數(shù)

let progress=0
function run(){
  if(progress<1){
    progress=parseFloat((progress + 0.01).toFixed(2))
    document.querySelector('h1').style.setProperty('--progress',progress)
    console.log(progress);
    setTimeout(run, 20);
  }
}
run()

看看最終效果

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

最新評(píng)論