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

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

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

先看兩個效果：

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

下面就簡單分析一下實現(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;

就是這么簡單。

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

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

未完待續(xù)哦 :)

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

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

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

相關(guān)文章

窗口進度條及其高級使用

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

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

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

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

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

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

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

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

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

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