CSS3脉动甜甜圈

CSS3 Pulsing Donut

css3, donut

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

ul {
    list-style-type: none;
    height: 300px;
    width: 300px;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-animation: 1s turn infinite ease-in-out;
    animation: 1s turn infinite ease-in-out;
}
ul li {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    border: 3px solid #fff;
    -webkit-animation: 3s grow infinite ease-in-out;
    animation: 3s grow infinite ease-in-out;
}
ul li:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
ul li:nth-child(2) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
ul li:nth-child(3) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
ul li:nth-child(4) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
ul li:nth-child(5) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
ul li:nth-child(6) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
ul li:nth-child(7) {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
ul li:nth-child(8) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
ul li:nth-child(9) {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
ul li:nth-child(10) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
ul li:nth-child(11) {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
ul li:nth-child(12) {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
ul li:nth-child(13) {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
ul li:nth-child(14) {
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}
ul li:nth-child(15) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
@-webkit-keyframes grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes turn {
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    60% {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
    90% {
        -webkit-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
    }
}
@keyframes turn {
    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    60% {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
    90% {
        -webkit-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
    }
}
html {
    display: table;
    width: 100%;
    height: 100%;
}
body {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color: #0b0b0b;
}

HTML

CSS3 Pulsing Donut

css3, donut

编辑器支持Emmet

快捷键

CSS3 Pulsing Donut

css3, donut

CSS3 酷酷的缩放圈圈动画

CSS3 带标记完成状态的圈形LOADING动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：