CSS动画应用

目录

前言

一、进度条的动画

---

前言

这里是一些关于动画的应用，不定时更新进去

---

一、进度条的动画

<div class="example"><div class="child"></div></div>

.example {
    width: 500px;
    height: 50px;
    background-color: rgba(31, 30, 30, 0.1);
    border-radius: 25px;
    position: relative;
    .child {
        border-radius: 25px 0 0 25px;
        position: absolute;
        width: 300px;
        height: 50px;
        background-color: aqua;
        animation: frame 3s;
        &:after {
            content: '';
            border-radius: 100%;
            width: 50px;
            height: 50px;
            background: aqua;
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            border: 10px solid white;
            z-index: 9999;
        }
    }
}

@keyframes frame {
    0% {
        width: 0px;
    }
    100% {
        width: 300px;
    }
}