首页 > 其他分享> > CSS+SVG 制作B站充电效果

CSS+SVG 制作B站充电效果

2022-05-02 12:31:37 作者：互联网

CSS+SVG 实现B站为他充电效果

先浅浅分析一下结构，外层一个div 内部嵌套两个div 使用flex布局分布左右两端，右侧边距为0 上下左分别添加一定的边距。左侧为他充电按钮很简单不过多分析，主要是右侧像电路一样的图案，主要是使用figma这个在线画图软件画出svg图案，直接复制代码即可。 https://www.figma.com/

HTML部分代码

 <div class="reward">
        <div class="reward-trigger">
            <i class="iconfont icon-shandian"></i>
            <p>为我充电</p>
        </div>
        <div class="reward-content">
            <div class="reward-content-original">
                <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 77H234.226L307.006 24H790"/>
                    <path d="M0 140H233.035L329.72 71H1028" />
                    <path d="M1 255H234.226L307.006 307H790"  />
                    <path d="M0 305H233.035L329.72 375H1028"/>
                    <rect y="186" width="236" height="24" fill="#e6eaef" />
                    <ellipse cx="790" cy="25.5" rx="25" ry="25.5"  />
                    <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
                    <ellipse cx="790" cy="307.5" rx="25" ry="25.5" />
                    <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
                </svg>
            </div>
</div>

CSS部分代码

.reward{
    width: 28rem;
    height: 5rem;
    margin: 1rem 0 1rem 2rem;

    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
.reward>div{
    flex: 1;
    border: 1px solid rgb(249, 249, 249);
    box-sizing: border-box;
}
.reward-trigger{
    height: 100%;
    background-color: #f25d8e;
    border-radius: 8px;
    text-align: center;
    line-height: 5rem;
}
.reward-trigger>i,.reward-trigger>p{
    display: inline;
    color: rgb(253, 253, 253);
    font-weight: bold;
    font-size: 30px;
    margin: 0 5px;
}
svg{
    width: 13rem;
    height: 100%;
}
path,ellipse{
    stroke:#e6eaef;
    stroke-width:20;
}

如何实现由左向右侧移动的动画效果，原理很简单，首先准备三个不同颜色的svg，最基础的灰色作为底部，将粉色与黄色通过定位，重叠在灰色上面，并设置宽度为0。当鼠标移动到左侧按钮触发hover事件后，给粉色宽度赋予100%。即可实现。

.reward-trigger:hover{
    background-color: #ed739b;
}
.reward-trigger:hover+.reward-content>.reward-content-pink{
    width: 100%;
}
.reward-content{
    position: relative;
    overflow: hidden;
}
.reward-content-original{
    height: 5rem;
    margin-left: 1rem;
    box-sizing: border-box;
}
.reward-content-pink{
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 1rem;
    overflow: hidden;
    transition:all 0.5s;
}
.reward-content-yellow{
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -1rem;
    overflow: hidden;
    transition:all 0.5s;
}
svg{
    width: 13rem;
    height: 100%;
}
path,ellipse{
    stroke:#e6eaef;
    stroke-width:20;
}
.reward-content-pink path,.reward-content-pink ellipse{
    stroke:#f25d8e;
    stroke-width:20;
}
.reward-content-pink>svg{
    width: 13rem;
}
.reward-number{
    width: 5rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.625rem;
    /* margin-left: -2.5rem; */
    color: #99a2aa;
}

但是黄色不是一整个图案显示出来，是一小块，所以设置一个显示区域即可其他隐藏。所以可以使用clip-path和自定义属性将动画开头和结尾处显示的部分分割出来。

animation 添加延迟0.5s运行，并循环。

.reward-content-yellow{
    width: 100%;
    --division-0:inset(50% 50% 50% 50%);
    --division-1:inset(0% 90% 0% 0%);
    --division-2:inset(0% 0% 0% 90%);
    clip-path: var(--division-0);
}
.reward-trigger:hover+.reward-content>.reward-content-yellow{
    animation: rewardContent 0.5s linear 0.5s infinite;
}
@keyframes rewardContent{
    0%{
        clip-path: var(--division-1);
    }
    100%{
        clip-path: var(--division-2);
    }
}

最后实现效果

全部代码：

<template>
    <div class="reward">
        <div class="reward-trigger">
            <i class="iconfont icon-shandian"></i>
            <p>为我充电</p>
        </div>
        <div class="reward-content">
            <div class="reward-content-original">
                <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 77H234.226L307.006 24H790"/>
                    <path d="M0 140H233.035L329.72 71H1028" />
                    <path d="M1 255H234.226L307.006 307H790"  />
                    <path d="M0 305H233.035L329.72 375H1028"/>
                    <rect y="186" width="236" height="24" fill="#e6eaef" />
                    <ellipse cx="790" cy="25.5" rx="25" ry="25.5"  />
                    <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
                    <ellipse cx="790" cy="307.5" rx="25" ry="25.5" />
                    <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
                </svg>
            </div>
            <div class="reward-content-pink">
                <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 77H234.226L307.006 24H790" />
                    <path d="M0 140H233.035L329.72 71H1028"/>
                    <path d="M1 255H234.226L307.006 307H790"/>
                    <path d="M0 305H233.035L329.72 375H1028"/>
                    <rect y="186" width="236" height="24" fill="#f25d8e" />
                    <ellipse cx="790" cy="25.5" rx="25" ry="25.5"/>
                    <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
                    <ellipse cx="790" cy="307.5" rx="25" ry="25.5"/>
                    <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
                </svg>
            </div>
            <div class="reward-content-yellow">
                <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 77H234.226L307.006 24H790" />
                    <path d="M0 140H233.035L329.72 71H1028"/>
                    <path d="M1 255H234.226L307.006 307H790"/>
                    <path d="M0 305H233.035L329.72 375H1028"/>
                    <rect y="186" width="236" height="24" fill="#e5ff00" />
                    <ellipse cx="790" cy="25.5" rx="25" ry="25.5"/>
                    <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
                    <ellipse cx="790" cy="307.5" rx="25" ry="25.5"  />
                    <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
                </svg>
            </div>
            <div class="reward-number">
                <p>共 {{num}} 人</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      num: 10
    }
  }
}
</script>
<style scoped>
.reward{
    width: 28rem;
    height: 5rem;
    margin: 1rem 0 1rem 2rem;

    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
.reward>div{
    flex: 1;
    border: 1px solid rgb(249, 249, 249);
    box-sizing: border-box;
}
.reward-trigger{
    height: 100%;
    background-color: #f25d8e;
    border-radius: 8px;
    text-align: center;
    line-height: 5rem;
}
.reward-trigger>i,.reward-trigger>p{
    display: inline;
    color: rgb(253, 253, 253);
    font-weight: bold;
    font-size: 30px;
    margin: 0 5px;
}
.reward-content{
    position: relative;
    overflow: hidden;
}
.reward-content-original{
    height: 5rem;
    margin-left: 1rem;
    box-sizing: border-box;
}
svg{
    width: 13rem;
    height: 100%;
}
path,ellipse{
    stroke:#e6eaef;
    stroke-width:20;
}
.reward-content-pink,.reward-content-yellow{
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 1rem;
    overflow: hidden;
}
.reward-content-pink{
    transition:all 0.5s;
}
.reward-content-yellow{
    width: 100%;
    --division-0:inset(50% 50% 50% 50%);
    --division-1:inset(0% 90% 0% 0%);
    --division-2:inset(0% 0% 0% 90%);
    clip-path: var(--division-0);
}
.reward-content-pink path,.reward-content-pink ellipse{
    stroke:#f25d8e;
    stroke-width:20;
}
.reward-content-pink>svg{
    width: 13rem;
}
/*  */
.reward-content-yellow path,.reward-content-yellow ellipse{
    stroke:#e5ff00;
    stroke-width:20;
}
.reward-number{
    width: 5rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.625rem;
    color: #99a2aa;
}
.reward-trigger:hover{
    background-color: #ed739b;
}
.reward-trigger:hover+.reward-content>.reward-content-pink{
    width: 100%;
}
.reward-trigger:hover+.reward-content>.reward-content-yellow{
    animation: rewardContent 0.5s linear 0.5s infinite;
}
@keyframes rewardContent{
    0%{
        clip-path: var(--division-1);
    }
    100%{
        clip-path: var(--division-2);
    }
}
</style>

标签：SVG,100%,height,content,width,0%,充电,reward,CSS
来源： https://www.cnblogs.com/WangEDblog/p/16215471.html