HTML
首先是HTML部分，写了一个爸爸和他的30个女儿，女儿越多实现效果就越密集
<body> <div class="div"> <div class="box" style="--a:1"></div> <div class="box" style="--a:2"></div> <div class="box" style="--a:3"></div> <div class="box" style="--a:4"></div> <div class="box" style="--a:5"></div> <div class="box" style="--a:6"></div> <div class="box" style="--a:7"></div> <div class="box" style="--a:8"></div> <div class="box" style="--a:9"></div> <div class="box" style="--a:10"></div> <div class="box" style="--a:11"></div> <div class="box" style="--a:12"></div> <div class="box" style="--a:13"></div> <div class="box" style="--a:14"></div> <div class="box" style="--a:15"></div> <div class="box" style="--a:16"></div> <div class="box" style="--a:17"></div> <div class="box" style="--a:18"></div> <div class="box" style="--a:19"></div> <div class="box" style="--a:20"></div> <div class="box" style="--a:21"></div> <div class="box" style="--a:22"></div> <div class="box" style="--a:23"></div> <div class="box" style="--a:25"></div> <div class="box" style="--a:26"></div> <div class="box" style="--a:27"></div> <div class="box" style="--a:28"></div> <div class="box" style="--a:29"></div> <div class="box" style="--a:30"></div> </div> </body>
CSS
首先常规操作🤣
*{ margin: 0; padding: 0; }
设置背景颜色，这里overflow: hidden;是为了适配不同屏幕，overflow属性，用来指定如果内容溢出元素的框，将怎么处理，一共有四个值，hidden表示内容会被修剪，多余部分是不可见的，这就完成了适配
body{ background: rgb(126, 147, 190); /*适配*/ overflow: hidden; }
设置爸爸，子绝父相，宽高分别沾满屏幕，视觉效果拉满，justify-content: center; 用于设置或检索弹性盒子元素在横轴的对齐方式，center表示位于容器中心，display: flex; 即弹性布局，用来为盒子模型提供最大的灵活性， perspective: 100px; 设置100px的3D元素
.div{ width: 100%; height: 100%; position: relative; justify-content: center; display: flex; align-items: center; top: 300px; perspective: 100px; }
这里对30个女儿初始化并处理，特别注意标注灵魂的位置，慢慢领悟，你就会理解渐变的效果其实很简单，慢慢积累加油
.box{ width: 1100px; height: 500px; position: absolute; /*圆角*/ border-radius: 50px; border: 35px white solid; /*阴影，默认在外,inset内*/ box-shadow: 0px 0px 80px rgb(91, 134, 155), inset 0px 0px 90px rgb(2, 184, 250); animation:zhi 15s ease-in-out infinite both; /*灵魂*/ animation-delay: calc(var(--a)*0.45s); }
最后就是关键帧了
@keyframes zhi{ 0%{ opacity: 1; transform:translateZ(-700px) scale(0.2); } 100%{ /* 透明度 */ opacity: 1; /* translateZ(200px)表示大 */ /* scale(1)缩放 */ transform:translateZ(200px) scale(1); } }
