zc100/template/pc/css/button.css

.btn-group{
    position: fixed;
    top: 34%;
    right: 10%;
    z-index: 9999;
}
.btn-group a{
    margin: 5px 0px;
}
.btn-a{
    display: block;

    /* 画板 3614 */
    /*position: fixed;
    right: 125px;
    top: 34%;*/

    width: 53px;
    height: 155px;
    border-radius: 50px;

    /* 小卡片 */
    box-shadow: 5px 5px 25px 0px rgba(3, 8, 82, 0.1);
    background: rgb(255, 255, 255);

    color: rgb(38, 43, 106);
    font-family: "HarmonyOS Sans SC";
    font-size: 16px;
    font-weight: 400;
    line-height: 126%;
    letter-spacing: 0px;
    text-align: left;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;

    text-align: center;
    line-height: 53px;

    z-index: 8000;
}


.btn-b{
    display: block;

    /* 画板 3614 */
  /*  position: fixed;
    right: 125px;
    top: 58%;*/

    width: 53px;
    height: 139px;
    border-radius: 50px;

    /* 小卡片 */
    box-shadow: 5px 5px 25px 0px rgba(3, 8, 82, 0.1);
    background: rgb(255, 255, 255);

    color: rgb(38, 43, 106);
    font-family: "HarmonyOS Sans SC";
    font-size: 16px;
    font-weight: 400;
    line-height: 126%;
    letter-spacing: 0px;
    text-align: left;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;

    text-align: center;
    line-height: 53px;

    z-index: 8000;
}

.btn-c{
    /*position: fixed;
    right: 125px;
    top: 58%;*/

    display: block;
    width: 53px;
    height: 53px;
    border-radius: 50px;

    /* 小卡片 */
    box-shadow: 5px 5px 25px 0px rgba(3, 8, 82, 0.1);
    background: rgb(255, 255, 255);

    text-align: center;
    line-height: 53px;

    z-index: 8000;
}

.btn-d{
    /*position: fixed;
    right: 125px;
    top: 68%;*/
    display: block;
    width: 53px;
    height: 53px;
    border-radius: 50px;

    /* 小卡片 */
    box-shadow: 5px 5px 25px 0px rgba(3, 8, 82, 0.1);
    background: rgb(255, 255, 255);
    text-align: center;
    line-height: 53px;

    z-index: 8000;
}

.btn-e{
    display: block;
    width: 53px;
    height: 53px;
    border-radius: 50px;

    /* 小卡片 */
    box-shadow: 5px 5px 25px 0px rgba(3, 8, 82, 0.1);
    background: rgb(255, 255, 255);
    text-align: center;
    line-height: 53px;

    z-index: 8000;
}

/**
 */
.btn-e svg{
    width: 35px;
    /* 相对定位 */
    position: relative;
    /* z-index: 10; */
    margin-top: 11px;
}
#heart{
    /* 填充颜色 */
    fill: #eee;
    /* stroke属性可应用于任何种类的线条，文字和元素，就像一个圆的轮廓 */
    stroke: var(--c);
    /* 线条宽度 */
    stroke-width: 40px;
    /* 设置线条为虚线，虚线的长度 */
    stroke-dasharray: 2600;
    /* 线条的位移 */
    stroke-dashoffset: 2600;
    /* 端点为圆头 */
    stroke-linecap: round;
}
/* 勾选复选框执行各个动画 */
.btn-e-active svg #heart{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: drawHeart 0.1s linear forwards;
}
.btn-e-active #heart_svg{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: beat 0.1s linear forwards;
}

/**
 */
.btn-d svg{
    width: 35px;
    margin-top: 10px !important;
}
#heart2{
    /* 填充颜色 */
    fill: #eee;
    /* stroke属性可应用于任何种类的线条，文字和元素，就像一个圆的轮廓 */
    stroke: var(--c);
    /* 线条宽度 */
    stroke-width: 40px;
    /* 设置线条为虚线，虚线的长度 */
    stroke-dasharray: 2600;
    /* 线条的位移 */
    stroke-dashoffset: 2600;
    /* 端点为圆头 */
    stroke-linecap: round;
}
/* 勾选复选框执行各个动画 */
.btn-e-active svg #heart2{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: drawHeart 0.1s linear forwards;
}
.btn-e-active #heart2_svg{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: beat 0.1s linear forwards;
}


/**
 */
.btn-c svg{
    width: 30px;
    margin-top: 10px !important;
}
#heart3{
    /* 填充颜色 */
    fill: #eee;
    /* stroke属性可应用于任何种类的线条，文字和元素，就像一个圆的轮廓 */
    stroke: var(--c);
    /* 线条宽度 */
    stroke-width: 40px;
    /* 设置线条为虚线，虚线的长度 */
    stroke-dasharray: 2600;
    /* 线条的位移 */
    stroke-dashoffset: 2600;
    /* 端点为圆头 */
    stroke-linecap: round;
}
/* 勾选复选框执行各个动画 */
.btn-e-active svg #heart3{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: drawHeart 0.1s linear forwards;
}
.btn-e-active #heart3_svg{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: beat 0.1s linear forwards;
}


/*
 */
/* 定义动画 */
/* 画心的动画 */
@keyframes drawHeart {
    0%{
        stroke-dashoffset: 2600;
    }
    80%{
        fill: #eee;
        stroke-dashoffset: 0;
    }
    100%{
        fill: red;
        stroke-dashoffset: 0;
    }
}
/* 心跳动的动画 */
@keyframes beat {
    0%{
        transform: scale(1);
    }
    70%{
        transform: scale(1);
    }
    80%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

#share-box{
    position: absolute;
    bottom:10px;
    right:60px;
    width: 389px;
    margin-left: -300px;
    background: #fff;
    z-index:9999;
    border-radius: 10px;
}