CSS 实现楼梯与小球动画

CSS 实现楼梯与小球动画

效果展示

CSS 知识点

• CSS动画使用
• transform属性使用

页面整体布局

<div class="window"><div class="stair"><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span><span style="--i: 4"></span><span style="--i: 5"></span><span style="--i: 6"></span><span style="--i: 7"></span><span style="--i: 8"></span><span style="--i: 9"></span><span style="--i: 10"></span></div>
</div>

实现整体容器样式

.window {position: relative;width: 340px;height: 480px;background: #fff;border-radius: 170px;border: 4px solid #114b64;box-shadow: 0 0 0 12px #fff;overflow: hidden;
}
.window .stair {position: absolute;width: 100%;right: calc(-100% + 0px);top: 100px;animation: stairs 1s linear infinite; // 动画部分
}
.window .stair span {position: absolute;top: calc(var(--i) * 40px);right: calc(var(--i) * 40px);width: 100%;min-height: 40px;background: #114b64;border-bottom: 4px solid #fff;border-top-left-radius: 4px;
}

实现楼梯动画

@keyframes stairs {0% {transform: translateX(0) translateY(0);}100% {transform: translateX(40px) translateY(-40px);}
}

实现小球

.window::after {content: "";position: absolute;top: 190px;left: calc(50% + 45px);width: 30px;height: 30px;border-radius: 50%;background: #f44336;animation: bounce 1s ease-in-out infinite;
}

实现小球动画

@keyframes bounce {0%,100% {transform: translateY(-1px);}50% {transform: translateY(-40px);}
}

完整代码下载

完整代码下载