css3 實(shí)現(xiàn)一個k歌效果和一個進(jìn)度條的效果

huangjinnan 發(fā)布于2019-08-29 13:28 / 1649人閱讀

摘要：歌效果比較簡單，先分析歌效果吧。第二個進(jìn)度條效果其實(shí)就是一個小技巧而已，歌字體效果都出來了，地下在疊加一層背景色就了，這個背景色就是對應(yīng)的顏色值，這里就是修改一下顏色值，就是下面這段代碼了未完待續(xù)哦

先看兩個效果：

相信這兩個效果很多人都想要，哈哈，我看到很多app，下載進(jìn)度就是這樣的，雖然平淡，但是很有用，只有你遇到了，才知道為什么有用了。

下面就簡單分析一下實(shí)現(xiàn)原理。

首先，用到的css3特性有：
css3線性漸變linear-gradient，和-webkit-background-clip，-webkit-text-fill-color，這三個特性。

k歌效果比較簡單，先分析k歌效果吧。

1，一個漸變的背景色

 background-image: linear-gradient(to right, orange, green);

2,漸變背景的變形

 background-image: linear-gradient(to right, orange 50%, green 0%);

然后就發(fā)現(xiàn)，調(diào)整這個50%,就可以隨意調(diào)整漸變色的分界線了。

好，核心代碼已完成。剩下的就是把這個漸變的背景色填充到文字上面
3，填充字體顏色

background-image: linear-gradient(to right, orange 50%, green 0%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

就是這么簡單。

第二個進(jìn)度條效果：
其實(shí)就是一個小技巧而已，k歌字體效果都出來了，地下在疊加一層背景色就ok了，這個背景色就是50%對應(yīng)的顏色值，這里就是green；

修改一下顏色值，就是下面這段代碼了：

未完待續(xù)哦 :)

GPU云服務(wù)器云服務(wù)器 html進(jìn)度條效果 js進(jìn)度條效果 js進(jìn)度條按鈕效果這種效果怎么實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112625.html

相關(guān)文章

窗口進(jìn)度條及其高級使用

摘要：效果優(yōu)化一下因?yàn)檫@里的窗口滾動進(jìn)度條沒有過度效果嗎雖然谷歌瀏覽器她會自動幫你優(yōu)化一點(diǎn)過度的效果，但是我們還是自己寫的和諧一點(diǎn)點(diǎn)，所以就加多一句的動畫到這里我們的滾動進(jìn)度條就基本上實(shí)現(xiàn)了，也可以做一個很不錯的水平效果。我們大概實(shí)現(xiàn)的效果就像YouTube上面的紅色進(jìn)度條那樣。但是YouTube上面那個進(jìn)度條還是很坑爹的。文章后面再告訴你們?yōu)槭裁础?首先窗口的滾動進(jìn)度條窗口的滾動條非常...

objc94 2019-08-22 10:48 評論0 收藏0
css3實(shí)現(xiàn)圓形進(jìn)度條

摘要：在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大??； 2、在小程序...

leanote 2019-08-21 11:36 評論0 收藏0
css3實(shí)現(xiàn)圓形進(jìn)度條

摘要：在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大??； 2、在小程序...

enali 2019-08-29 12:12 評論0 收藏0
實(shí)現(xiàn)環(huán)形進(jìn)度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動態(tài)效果。而藍(lán)色部分元素的顏色，是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個是的實(shí)現(xiàn)這個是的實(shí)現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實(shí)現(xiàn)環(huán)形進(jìn)度條整體思路是：通過裁切（clip）產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)（rotate）角度的變化產(chǎn)生動態(tài)效果。先來回顧兩個基礎(chǔ)知識點(diǎn) （1）css的一個不常見的...

BWrong 2019-08-29 12:22 評論0 收藏0
實(shí)現(xiàn)環(huán)形進(jìn)度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動態(tài)效果。而藍(lán)色部分元素的顏色，是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個是的實(shí)現(xiàn)這個是的實(shí)現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實(shí)現(xiàn)環(huán)形進(jìn)度條整體思路是：通過裁切（clip）產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)（rotate）角度的變化產(chǎn)生動態(tài)效果。先來回顧兩個基礎(chǔ)知識點(diǎn) （1）css的一個不常見的...

lidashuang 2019-08-21 15:32 評論0 收藏0