纯CSS实现的3D球体穿过平面空洞动画效果

CSS ball through the box

css3, ball, hole

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background-color: #333;
    height: 100%;
}
body {
    background-color: #333;
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
.wrap {
    width: 200px;
    height: 140px;
    position: relative;
}
.wrap:after {
    width: 100%;
    height: 20px;
    position: absolute;
    content: '';
    background-color: #9c004e;
}
.box-top-wrap,
.box-bottom-wrap {
    position: absolute;
    height: 75px;
    overflow: hidden;
    width: 200px;
}
.box-top-wrap {
    top: 0;
}
.box-bottom-wrap {
    bottom: 0;
}
.box-bottom,
.box-top {
    width: 100px;
    height: 75px;
    border-radius: 50%;
    border: 100px solid hotpink;
    position: absolute;
    left: calc(50% - 150px);
}
.box-bottom {
    bottom: calc(-50% - 30px);
}
.box-top {
    top: calc(-50% - 30px);
}
.box-inside-wrap {
    overflow: hidden;
    width: 200px;
    height: 140px;
    position: relative;
}
.box-inside {
    width: 100px;
    height: 75px;
    border-radius: 50%;
    border: 100px solid #9c004e;
    position: absolute;
    bottom: -60%;
    right: -25%;
}
.ball {
    background-color: skyblue;
    background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 3s through ease-in-out infinite;
    overflow: hidden;
}
@keyframes through {
    0% {
        transform: translateY(-300px);
    }
    50% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(-300px);
    }
}

HTML

CSS ball through the box

css3, ball, hole

编辑器支持Emmet

快捷键

CSS ball through the box

css3, ball, hole

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

纯CSS3实现的3D风扇动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字