CSS-按钮打勾动态效果

耀南.

已于 2024-03-21 19:30:38 修改

阅读量267

点赞数 3

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css

于 2024-03-21 19:30:20 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/136918199

版权

前端好玩炫酷的动画小案例专栏收录该内容

57 篇文章 7 订阅

订阅专栏

看效果图（动画的，这里就不展示了，直接c完自己运行看吧）

HTML：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮打勾动态效果</title>
    <link rel="stylesheet" href="210.css">
</head>

<body>
    <div class="background">
        <input type="checkbox" id="button">
        <label for="button" class="button">
            点击按钮<i class="iconfont icon-check"></i>
        </label>
        <svg class="circle">
            <circle cx="32" cy="32" r="31"></circle>
        </svg>
    </div>
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
    background: skyblue;
    color: white;
    border-radius: 5px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
}

.background input {
    display: none;
}

.background .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 60px;
    border: 2px solid white;
    border-radius: 30px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.background .button .icon-check {
    position: absolute;
    color: rgb(111, 119, 230);
    opacity: 0;
    font-size: 30px;
}

.background .circle {
    position: absolute;
    width: 65px;
    height: 65px;
    fill: none;
    stroke: white;
    stroke-width: 3px;
    stroke-dasharray: 183 183;
    opacity: 0;
    left: 50%;
    top: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.background .button:hover {
    background-color: rgb(135, 142, 235);
}

.background input:checked~ .button {
    animation: button 0.5s ease both,
        fill 0.5s ease-out 1.5s forwards;
}

@keyframes button {
    0% {
        width: 260px;
        left: 70px;
        border-color: white;
        color: white;
    }

    50% {
        color: transparent;
    }

    100% {
        width: 60px;
        left: 170px;
        border-color: rgb(33, 175, 231);
        background: transparent;
        color: transparent;
    }
}

@keyframes fill {
    0% {
        background: transparent;
        border-color: white;
    }

    100% {
        background: white;
    }
}

.background input:checked~.button .icon-check {
    animation: check 0.5s ease-out 1.5s both;
}

@keyframes check {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.background input:checked~.circle {
    animation: circle 2s ease-out 0.5s both;
}

@keyframes circle {
    0% {
        stroke-dashoffset: 183;
    }

    50% {
        stroke-dashoffset: 0;
        stroke-dasharray: 183;
        transform: translate(-50%, -50%) rotate(-90deg) scale(1);
        opacity: 1;
    }
    100% {
        stroke-dasharray: 500 500;
        transform: translate(-50%, -50%) rotate(-90deg) scale(2);
        opacity: 0;
    }
}