CSS3 央视新闻联播（卫星环绕）图标动画

交叉旋转的两个椭圆

spin

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    height: 100%;
    background: -webkit-linear-gradient(#ecf0f1, #fff);
    background: linear-gradient(#ecf0f1, #fff);
}
body {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.loader {
    width: 60px;
    height: 60px;
}
.loader-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    -webkit-transform: skew(30deg, 20deg);
    -ms-transform: skew(30deg, 20deg);
    transform: skew(30deg, 20deg);
}
.loader-ring:last-of-type {
    -webkit-transform: skew(-30deg, -20deg) scale(-1, 1);
    -ms-transform: skew(-30deg, -20deg) scale(-1, 1);
    transform: skew(-30deg, -20deg) scale(-1, 1);
}
.loader-ring:last-of-type img {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.loader-ring img {
    max-width: 100%;
    height: auto;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

HTML

交叉旋转的两个椭圆

spin

编辑器支持Emmet

快捷键

交叉旋转的两个椭圆

spin

HTML5 CSS3三叶指尖陀螺玩具动画

HTML5 SVG版本的指尖陀螺（Fidget Spinner）玩具

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：