您现在的位置是：网站首页> 编程资料编程资料

css+svg实现b站充电效果的示例代码svg+css 或者js制作打钩的动画效果使用CSS3实现SVG路径描边动画效果入门教程使用CSS混合模式和SVG来动态更改产品图片的颜色svg+css3做一个动感的波浪效果实现基于 CSS 动画的 SVG 按钮实例代码CSS、SVG和canvas分别实现文本文字纹理叠加效果css中引入svg来兼容部分安卓机显示0.5px边框的示例利用SVG和CSS3来实现一个炫酷的边框动画

2023-10-18 336人已围观

简介 这篇文章主要介绍了css+svg实现b站充电效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

 

难点

svg图形的两块蒙版制作

先上代码

这是左边粉色框框的内容

这个没啥好说的

为TA充电
 body { margin: 0; padding: 0; background-color: #eee; } /* 设置白色容器 */ #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; } /* 设置文本居中容器 */ #text-con { width: 100px; height: 100%; margin: 0 auto; position: relative; } /* 做一个小闪电 */ #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; }

这里做的就是创建一个svg的图形，背景色是灰色，看着是不是很多很复杂，没事，这也不是我写的

用的是这玩意，网页版在线的，画好后就可以右击复制代码了，是不是很简单！ www.figma.com/

 

既然svg图画好了，就要想怎么完成了

需要的东西：
1：svg底色为灰色的图；
2：一个粉色的svg图，当我鼠标hover到左边粉色框时，粉色svg图完全展开，初始为0；
3：快速移动的黄色小方块；

底色灰色做好了，还差粉色和黄色的svg图

mask是用来做粉色svg的蒙版的
 

跟灰色svg没有任何的区别，就是改改颜色
 

orange-mask是用来做黄色svg的蒙版
 

跟灰色svg没有任何的区别，就是改改颜色
 

共 0 人

css的代码

 /* 创建图形容器 */ #tube-con { width: 157px; height: 55px; position: absolute; right: -5px; top: 15px; } /* 对svg图形设置宽高 */ svg { width: 100%; height: 100%; } /* 创建一个蒙版 宽度为0，当我hover充电框的时候，宽度展开 */ #mask { width: 0px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; transition:all 0.5s; } /* 对蒙版的sbg单独设置宽高，保证宽度高低有一个固定值而不是百分比 */ #mask svg { width: 157px; height: 55px; } /* 对充电框hover的时候开始动画，将粉色线条铺开 */ #TA-con:hover+#tube-con>#mask{ width:157px; } /* 对充电框hover的时候开始动画，添加黄色快速移动的动画 */ #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; } /* 创建黄色移动的蒙版 */ #orange-mask{ width: 18px; height: 100%; overflow: hidden; position:absolute; left:-15px; top:0px; } /* 创建黄色移动的内容 */ #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蒙版的地方

因为既要保证黄色svg的蒙版从左向右移动，又要保证黄色svg位置保证不变；
蒙版为父元素，黄色svg为子元素，
父元素添加定位后，父元素移动，子元素一定会跟着移动，
如果子元素添加定位，父元素不添加定位 或者 父元素正常定位，子元素定位为fixed，
这有会导致父元素蒙版不能对子元素溢出的部分进行隐藏，在这我纠结了好久
！！！然后我就突然发现
父元素无论以多块的速度移动多远的距离，子元素只要以相同的速度移动相反的距离，
子元素就能保证一直以一个位置保持不变！！！子元素就相对body是静止的！！

move1是父元素蒙版的，movetwo是黄色svg图形的，请不要吐槽起名。。。。

move1移动多远，movetwo就移动相反的距离

 @keyframes move1 { 0%{ left:-15px; } 100%{ left:140px; } } @keyframes movetwo { 0%{ left:15px; } 100%{ left:-140px; } }

全部的代码

Document
为TA充电

        

            
相关内容

            
        

    

    

        

            
点击排行

            
        

        

            
本栏推荐

            
        


        

            
猜你喜欢
-六神源码网