css+svg實(shí)現(xiàn)b站充電效果的示例代碼
發(fā)布時(shí)間：2020-04-13 16:21:10 作者：anc 
我要評論
我要評論這篇文章主要介紹了css+svg實(shí)現(xiàn)b站充電效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
難點(diǎn)
svg圖形的兩塊蒙版制作
先上代碼
這是左邊粉色框框的內(nèi)容
這個(gè)沒啥好說的
<div id="con">
<div id="TA-con">
<div id="text-con">
<div id="linght"></div>
<div id="TA">為TA充電</div>
</div>
</div>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
/* 設(shè)置白色容器 */
#con {
width: 350px;
height: 85px;
background-color: #fff;
position: relative;
border-radius: 4px;
margin:50px auto;
}
#TA-con {
width: 157px;
height: 50px;
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
border-radius: 4px;
cursor: pointer;
}
/* 設(shè)置文本居中容器 */
#text-con {
width: 100px;
height: 100%;
margin: 0 auto;
position: relative;
}
/* 做一個(gè)小閃電 */
#linght {
width: 0;
height: 0;
position: absolute;
top: 36%;
left: 4px;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
transform: rotate(-55deg);
}
#linght::after {
position: absolute;
top: -13px;
left: -11px;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
transform: rotate(180deg);
border-radius: 4px;
}
/* 文字 */
#TA {
float: right;
line-height: 50px;
font-size: 15px;
color: #fff;
}
#TA-con:hover {
background-color: #ff6b9a;
}
這里做的就是創(chuàng)建一個(gè)svg的圖形，背景色是灰色，看著是不是很多很復(fù)雜，沒事，這也不是我寫的
<div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#e5e9ef" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
用的是這玩意，網(wǎng)頁版在線的，畫好后就可以右擊復(fù)制代碼了，是不是很簡單！ www.figma.com/
既然svg圖畫好了，就要想怎么完成了
需要的東西：
1：svg底色為灰色的圖；
2：一個(gè)粉色的svg圖，當(dāng)我鼠標(biāo)hover到左邊粉色框時(shí)，粉色svg圖完全展開，初始為0；
3：快速移動的黃色小方塊；
底色灰色做好了，還差粉色和黃色的svg圖
mask是用來做粉色svg的蒙版的
<div id="mask">
跟灰色svg沒有任何的區(qū)別，就是改改顏色
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" /> <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" /> <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" /> <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" /> <rect y="186" width="236" height="24" fill="#f25d8e" /> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div>
orange-mask是用來做黃色svg的蒙版
<div id="orange-mask" >
跟灰色svg沒有任何的區(qū)別，就是改改顏色
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20" /> <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" /> <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" /> <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" /> <rect y="186" width="236" height="24" fill="#ffd52b" /> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div> <p id="people">共 <b>0</b> 人</p> </div> </div>
css的代碼
/* 創(chuàng)建圖形容器 */
#tube-con {
width: 157px;
height: 55px;
position: absolute;
right: -5px;
top: 15px;
}
/* 對svg圖形設(shè)置寬高 */
svg {
width: 100%;
height: 100%;
}
/* 創(chuàng)建一個(gè)蒙版 寬度為0，當(dāng)我hover充電框的時(shí)候，寬度展開 */
#mask {
width: 0px;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transition:all 0.5s;
}
/* 對蒙版的sbg單獨(dú)設(shè)置寬高，保證寬度高低有一個(gè)固定值而不是百分比 */
#mask svg {
width: 157px;
height: 55px;
}
/* 對充電框hover的時(shí)候開始動畫，將粉色線條鋪開 */
#TA-con:hover+#tube-con>#mask{
width:157px;
}
/* 對充電框hover的時(shí)候開始動畫，添加黃色快速移動的動畫 */
#TA-con:hover+#tube-con>#orange-mask{
animation: move1 0.5s linear 0.2s infinite;
}
#TA-con:hover+#tube-con>#orange-mask svg{
animation: movetwo 0.5s linear 0.2s infinite;
}
/* 創(chuàng)建黃色移動的蒙版 */
#orange-mask{
width: 18px;
height: 100%;
overflow: hidden;
position:absolute;
left:-15px;
top:0px;
}
/* 創(chuàng)建黃色移動的內(nèi)容 */
#orange-mask svg {
position: absolute;;
top:0;
left:15px;
width: 157px;
height: 55px;
}
@keyframes move1 {
0%{
left:-15px;
}
100%{
left:140px;
}
}
@keyframes movetwo {
0%{
left:15px;
}
100%{
left:-140px;
}
}
#people{
position:absolute;
right:10px;
top:8px;
font-size:12px;
font-family:"雅黑";
color:#aaa;
}
#people>b{
color:#777;
}
其中css處理最難的地方在于黃色svg和黃色svg蒙版的地方
因?yàn)榧纫ＷC黃色svg的蒙版從左向右移動，又要保證黃色svg位置保證不變；
蒙版為父元素，黃色svg為子元素，
父元素添加定位后，父元素移動，子元素一定會跟著移動，
如果子元素添加定位，父元素不添加定位 或者 父元素正常定位，子元素定位為fixed，
這有會導(dǎo)致父元素蒙版不能對子元素溢出的部分進(jìn)行隱藏，在這我糾結(jié)了好久
！??！然后我就突然發(fā)現(xiàn)
父元素?zé)o論以多塊的速度移動多遠(yuǎn)的距離，子元素只要以相同的速度移動相反的距離，
子元素就能保證一直以一個(gè)位置保持不變?。?！子元素就相對body是靜止的?。?/p>
move1是父元素蒙版的，movetwo是黃色svg圖形的，請不要吐槽起名。。。。
move1移動多遠(yuǎn)，movetwo就移動相反的距離
@keyframes move1 {
0%{
left:-15px;
}
100%{
left:140px;
}
}
@keyframes movetwo {
0%{
left:15px;
}
100%{
left:-140px;
}
}
全部的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
/* 設(shè)置白色容器 */
#con {
width: 350px;
height: 85px;
background-color: #fff;
position: relative;
border-radius: 4px;
margin:50px auto;
}
/* 設(shè)置文本內(nèi)容容器 */
#TA-con {
width: 157px;
height: 50px;
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
border-radius: 4px;
cursor: pointer;
}
/* 設(shè)置文本居中容器 */
#text-con {
width: 100px;
height: 100%;
margin: 0 auto;
position: relative;
}
/* 做一個(gè)小閃電 */
#linght {
width: 0;
height: 0;
position: absolute;
top: 36%;
left: 4px;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
transform: rotate(-55deg);
}
#linght::after {
position: absolute;
top: -13px;
left: -11px;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
transform: rotate(180deg);
border-radius: 4px;
}
/* 文字 */
#TA {
float: right;
line-height: 50px;
font-size: 15px;
color: #fff;
}
#TA-con:hover {
background-color: #ff6b9a;
}
/* 創(chuàng)建圖形容器 */
#tube-con {
width: 157px;
height: 55px;
position: absolute;
right: -5px;
top: 15px;
}
/* 對svg圖形設(shè)置寬高 */
svg {
width: 100%;
height: 100%;
}
/* 創(chuàng)建一個(gè)蒙版 寬度為0，當(dāng)我hover充電框的時(shí)候，寬度展開 */
#mask {
width: 0px;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transition:all 0.5s;
}
/* 對蒙版的sbg單獨(dú)設(shè)置寬高，保證寬度高低有一個(gè)固定值而不是百分比 */
#mask svg {
width: 157px;
height: 55px;
}
/* 對充電框hover的時(shí)候開始動畫，將粉色線條鋪開 */
#TA-con:hover+#tube-con>#mask{
width:157px;
}
/* 對充電框hover的時(shí)候開始動畫，添加黃色快速移動的動畫 */
#TA-con:hover+#tube-con>#orange-mask{
animation: move1 0.5s linear 0.2s infinite;
}
#TA-con:hover+#tube-con>#orange-mask svg{
animation: movetwo 0.5s linear 0.2s infinite;
}
/* 創(chuàng)建黃色移動的蒙版 */
#orange-mask{
width: 18px;
height: 100%;
overflow: hidden;
position:absolute;
left:-15px;
top:0px;
}
/* 創(chuàng)建黃色移動的內(nèi)容 */
#orange-mask svg {
position: absolute;;
top:0;
left:15px;
width: 157px;
height: 55px;
}
@keyframes move1 {
0%{
left:-15px;
}
100%{
left:140px;
}
}
@keyframes movetwo {
0%{
left:15px;
}
100%{
left:-140px;
}
}
#people{
position:absolute;
right:10px;
top:8px;
font-size:12px;
font-family:"雅黑";
color:#aaa;
}
#people>b{
color:#777;
}
</style>
</head>
<body>
<div id="con">
<div id="TA-con">
<div id="text-con">
<div id="linght"></div>
<div id="TA">為TA充電</div>
</div>
</div>
<div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#e5e9ef" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
<div id="mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" />
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#f25d8e" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<div id="orange-mask" >
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#ffd52b" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<p id="people">共 <b>0</b> 人</p>
</div>
</div>
</body>
</html>
到此這篇關(guān)于css+svg實(shí)現(xiàn)b站充電效果的示例代碼的文章就介紹到這了,更多相關(guān)css b站充電內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了svg+css 或者js制作打鉤的動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-31
使用CSS3實(shí)現(xiàn)SVG路徑描邊動畫效果入門教程
不依賴javascript，直接使用純css實(shí)現(xiàn) svg 的描邊繪制動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-21
使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色
這篇文章主要介紹了使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下2019-09-05
svg+css3做一個(gè)動感的波浪效果實(shí)現(xiàn)
這篇文章主要介紹了svg+css3做一個(gè)動感的波浪效果實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2019-07-02- 本文通過實(shí)例代碼給大家介紹了基于 CSS 動畫的 SVG 按鈕的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-12
CSS、SVG和canvas分別實(shí)現(xiàn)文本文字紋理疊加效果
這篇文章要實(shí)現(xiàn)文字本身的顏色和紋理進(jìn)行疊加，而非直接填充紋理，接下來通過實(shí)例代碼給大家介紹CSS、SVG和canvas分別實(shí)現(xiàn)文本文字紋理疊加效果，感興趣的朋友一起看看吧2018-03-15css中引入svg來兼容部分安卓機(jī)顯示0.5px邊框的示例
這篇文章主要介紹了css中引入svg來兼容部分安卓機(jī)顯示0.5px邊框的示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-22利用SVG和CSS3來實(shí)現(xiàn)一個(gè)炫酷的邊框動畫
這篇文章主要介紹了利用SVG和CSS3來實(shí)現(xiàn)一個(gè)炫酷的邊框動畫,不使用JavaScript使得編寫過程輕松了不少,需要的朋友可以參考下2015-07-22
