使用CSS3构建的精灵球

Pokeballs with CSS Shapes 一个平面化的球，一个拟物化（带阴影有立体感）的球，还有一个简单的旋转动画。

CSS3,动画

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*ball movement*/

@-webkit-keyframes catchEmAll {
    0% {
        transform: rotate(-30deg);
    }
    10% {
        transform: rotate(-30deg);
    }
    16% {
        transform: rotate(-50deg);
    }
    22% {
        transform: rotate(-30deg);
    }
    40% {
        transform: rotate(-30deg);
    }
    46% {
        transform: rotate(-50deg);
    }
    53% {
        transform: rotate(-30deg);
    }
    85% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes catchEmAll {
    0% {
        transform: rotate(-30deg);
    }
    10% {
        transform: rotate(-30deg);
    }
    16% {
        transform: rotate(-50deg);
    }
    22% {
        transform: rotate(-30deg);
    }
    40% {
        transform: rotate(-30deg);
    }
    46% {
        transform: rotate(-50deg);
    }
    53% {
        transform: rotate(-30deg);
    }
    85% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
body {
    background: -webkit-radial-gradient(#59abe3, #1e8ac2);
    background: radial-gradient(#59abe3, #1e8ac2);
    /*flat design pokeball*/
}
.wrapper2 {
    width: 300px;
    height: 300px;
    /*border:1px solid red;*/
    
    margin-left: 10%;
    margin-top: 5%;
    float: left;
}
.ball2 {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: -webkit-radial-gradient(#cf000f, #d91e18);
    background: radial-gradient(#cf000f, #d91e18);
    overflow: hidden;
}
.ball2::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 120px;
    background: -webkit-radial-gradient(#ececec, #bdc3c7);
    background: radial-gradient(#ececec, #bdc3c7);
    bottom: 0;
    left: 0;
    box-shadow: 0 -50px 0 0 #2c3e50;
}
.ball2::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ececec;
    top: 130px;
    left: 125px;
    box-shadow: 0 0 0 5px #2c3e50, 0 0 0 15px #ececec, 0 0 0 30px #2c3e50;
}
.topHalf2 {
    border-bottom: 300px solid rgba(0, 0, 0, 0.3);
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    height: 0;
    /*background-color: rgba(0,0,0,0.3);*/
    
    width: 300px;
    position: absolute;
    left: 51px;
    top: 70px;
    z-index: 5;
    transform: -webkit-rotate(-27deg);
    transform: rotate(-27deg);
    /*normal pokeball*/
}
.wrapper {
    width: 400px;
    height: 400px;
    margin-left: 10%;
    margin-top: 0;
    /*border:1px solid #CF000F;*/
    
    transform: -webkit-rotate(-30deg);
    transform: rotate(-30deg);
    float: left;
    -webkit-animation: catchEmAll 4s linear;
    animation: catchEmAll 4s linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.ball {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ececec;
    z-index: 2;
    overflow: hidden;
    position: relative;
    margin-left: 50%;
    margin-top: 50%;
    transform: translate(-50%, -50%);
}
.ball::before {
    content: "";
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    bottom: 10%;
    left: 10%;
}
.ball::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ececec;
    box-shadow: 0 0 0 5px black, 0 0 0 15px #ececec, 0 0 0 40px black;
    left: 25%;
    bottom: 32%;
}
.topHalf {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: #cf000f;
    left: 23%;
    bottom: 23%;
    position: absolute;
}
.topHalf::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: #ececec;
    /*box-shadow: 1px 1px 10px rgba(255,255,255,0.7);*/
    
    border-radius: 50%;
    top: 200px;
    left: 40px;
    transform: -webkit-rotate(10deg);
    transform: rotate(10deg);
}
.topHalf::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    top: 130px;
    left: -100px;
    background-color: transparent;
    box-shadow: 50px 70px 0 20px rgba(0, 0, 0, 0.5);
}

HTML

Pokeballs with CSS Shapes 一个平面化的球，一个拟物化（带阴影有立体感）的球，还有一个简单的旋转动画。

CSS3,动画

编辑器支持Emmet

快捷键

Pokeballs with CSS Shapes 一个平面化的球，一个拟物化（带阴影有立体感）的球，还有一个简单的旋转动画。

CSS3,动画

使用CSS3构建的React框架的图标

使用CSS3变换和图片构建的3D交互式家居

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：