拿css怎样做B站的充电动画效果？
发布时间：2022-04-12 04:46:27 所属栏目：语言 来源：互联网
导读：现在很多朋友都有用B站，其中B站有一个给up主充电的功能，小编觉得挺有意思的，因此这篇文章就给大家分享一下用css+svg怎样做B站的充电动画效果，感兴趣的朋友就继续往下看吧。 难点 svg图形的两块蒙版制作 先上代码 这是左边粉色框框的内容 这个没啥好说
|
现在很多朋友都有用B站，其中B站有一个给up主充电的功能，小编觉得挺有意思的，因此这篇文章就给大家分享一下用css+svg怎样做B站的充电动画效果，感兴趣的朋友就继续往下看吧。 难点 svg图形的两块蒙版制作 先上代码 这是左边粉色框框的内容 这个没啥好说的 <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; } /* 设置白色容器 */ #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图画好了，就要想怎么完成了 需要的东西： 1：svg底色为灰色的图； 2：一个粉色的svg图，当我鼠标hover到左边粉色框时，粉色svg图完全展开，初始为0； 3：快速移动的黄色小方块； 底色灰色做好了，还差粉色和黄色的svg图 mask是用来做粉色svg的蒙版的 <div id="mask"> 跟灰色svg没有任何的区别，就是改改颜色 <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> （编辑：宁德站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
