CSS3药丸 | 胶囊弹跳加载动画

Pharmacy Loader，可用于在线药店、医学、医药、春雨医生之类的网站。

css3, pill

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1985
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
:root {
    /* Transitions */
}
body {
    font-family: 'Montserrat', sans-serif;
}
.absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.loaderPill {
    text-align: center;
}
.loaderPill-anim {
    height: 160px;
}
.loaderPill-anim-bounce {
    -webkit-animation: loaderPillBounce 1800ms linear infinite;
    animation: loaderPillBounce 1800ms linear infinite;
}
.loaderPill-anim-flop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: loaderPillFlop 1800ms linear infinite;
    animation: loaderPillFlop 1800ms linear infinite;
}
.loaderPill-pill {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #237db5;
    background-image: -webkit-linear-gradient(left, #237db5 50%, #ffffff 50%);
    background-image: linear-gradient(to right, #237db5 50%, #ffffff 50%);
}
.loaderPill-floor {
    display: block;
    text-align: center;
}
.loaderPill-floor-shadow {
    display: inline-block;
    width: 70px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(35, 125, 181, 0.26);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    -webkit-animation: loaderPillScale 1800ms linear infinite;
    animation: loaderPillScale 1800ms linear infinite;
}
.loaderPill-text {
    font-weight: bold;
    color: #237db5;
    text-transform: uppercase;
}
@-webkit-keyframes loaderPillBounce {
    0% {
        -webkit-transform: translateY(123px);
        transform: translateY(123px);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    25% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    50% {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    75% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
    }
}
@keyframes loaderPillBounce {
    0% {
        -webkit-transform: translateY(123px);
        transform: translateY(123px);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    25% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    50% {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    75% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
    }
}
@-webkit-keyframes loaderPillFlop {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    25% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@keyframes loaderPillFlop {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    25% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@-webkit-keyframes loaderPillScale {
    0% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    25% {
        -webkit-transform: translateY(-15px) scale(0.7, 1);
        transform: translateY(-15px) scale(0.7, 1);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    50% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    75% {
        -webkit-transform: translateY(-15px) scale(0.6, 1);
        transform: translateY(-15px) scale(0.6, 1);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
    }
}
@keyframes loaderPillScale {
    0% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    25% {
        -webkit-transform: translateY(-15px) scale(0.7, 1);
        transform: translateY(-15px) scale(0.7, 1);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    50% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    75% {
        -webkit-transform: translateY(-15px) scale(0.6, 1);
        transform: translateY(-15px) scale(0.6, 1);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        -webkit-transform: translateY(-15px) scale(1, 1);
        transform: translateY(-15px) scale(1, 1);
    }
}

HTML

Pharmacy Loader，可用于在线药店、医学、医药、春雨医生之类的网站。

css3, pill

编辑器支持Emmet

快捷键

Pharmacy Loader，可用于在线药店、医学、医药、春雨医生之类的网站。

css3, pill

SVG+CSS3 弹圈（跳绳）加载动画

CSS3 七彩蚯蚓 | 舞龙灯加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：