CSS实现云朵循环跨屏漂浮及整体编组投影效果求助

实现方案 #

1. 云朵循环横穿屏幕调整 #

只需要做3处修改就能实现无缝循环：

• 给html,body添加overflow-x: hidden，隐藏云朵移出过程中产生的横向滚动条
• 把动画位移值改为相对视口宽度的vw单位，适配所有屏幕尺寸，保证云朵完全移出右侧视口后再从左侧进入
• 补全标准@keyframes语法，兼容不同浏览器内核，还可以给不同云朵设置不同的动画时长和延迟，让漂浮效果更自然

2. 云朵整组处理、整体投影实现 #

你现在的.cloud本身就是父容器，只要给它设置明确的宽高（刚好容纳内部所有圆形元素），父级的filter: drop-shadow就会自动识别整个云朵的轮廓生成统一投影，不会出现每个圆形单独带投影的问题，同时父容器加动画本身就是整体移动，不需要额外调整。

修改后的核心代码示例 #

CSS部分

@font-face {
    font-family: 'Super-Legend-Boy';
    src: url('./Documents/assets/fonts/Super-Legend-Boy.eot');
    src: url('./Documents/assets/fonts/Super-Legend-Boy.eot?#iefix') format('embedded-opentype'),
        url('./Documents/assets/fonts/Super-Legend-Boy.woff2') format('woff2'),
        url('./Documents/assets/fonts/Super-Legend-Boy.woff') format('woff'),
        url('./Documents/assets/fonts/Super-Legend-Boy.ttf') format('truetype'),
        url('./Documents/assets/fonts/Super-Legend-Boy.svg#Super-Legend-Boy') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,body {
    margin: 0;
    padding: 0;
    font-family: 'Super-Legend-Boy';
    background: #95e9d0;
    /* 新增：隐藏横向滚动条 */
    overflow-x: hidden;
}

.cloud {
    position: relative;
    /* 新增：设置云朵父容器宽高，刚好容纳内部圆形 */
    width: 250px;
    height: 120px;
    filter: drop-shadow(0px 5px 7px rgb(65, 63, 63));
    /* 基类统一定义动画公共属性 */
    animation: move linear infinite;
}

/* 每个云朵单独设置位置、动画时长、延迟，效果更自然 */
.cloud-one{
    top: 200px;
    left: 10%;
    animation-duration: 48s;
}

.cloud-two{
    top: 80px;
    left: 50%;
    animation-duration: 55s;
    animation-delay: 2s;
}

.cloud-three{
    top: 210px;
    left: 75%;
    animation-duration: 50s;
    animation-delay: 5s;
}

.cloud-four{
    top: 150px;
    left: 80%;
    animation-duration: 42s;
    animation-delay: 7s;
}

.cloud-five{
    top: 50px;
    left: 10%;
    animation-duration: 60s;
    animation-delay: 1s;
}

.cloud-six{
    top:210px;
    left: 25%;
    animation-duration: 52s;
    animation-delay: 3s;
}

/* 补全标准动画语法，用vw单位适配所有屏幕 */
@-webkit-keyframes move {
  from {-webkit-transform: translateX(-30vw);}
  to {-webkit-transform: translateX(120vw);}
}
@keyframes move {
  from {transform: translateX(-30vw);}
  to {transform: translateX(120vw);}
}

p {
    text-align: center;
}

.circle {
    background: white;
    border-radius: 50%;
    position: absolute;
}

.circle-one {
    height: 100px;
    width: 100px;
    left: 40px;
}

.circle-two {
    height: 60px;
    width: 100px;
    top: 40px;
}

.circle-three{
    height: 80px;
    width: 100px;
    top: 20px;
    left: 100px;
}

.circle-four {
    height: 50px;
    width: 100px;
    top: 50px;
    left: 150px;
}

div.container3 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

.line {
    position: absolute;
    bottom: 150px;
    height: 20px;
    width: 60%;
    left: 20%;
    background-color: grey;
}

HTML部分不需要修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者k par