CSS 实现楼梯与小球动画
效果展示
CSS 知识点
- CSS动画使用
- transform属性使用
页面整体布局
<div class="window"><div class="stair"><span style="css">--i: 1"></span><span style="css">--i: 2"></span><span style="css">--i: 3"></span><span style="css">--i: 4"></span><span style="css">--i: 5"></span><span style="css">--i: 6"></span><span style="css">--i: 7"></span><span style="css">--i: 8"></span><span style="css">--i: 9"></span><span style="css">--i: 10"></span></div>
</div>
实现整体容器样式
css">.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;
}
实现楼梯动画
css">@keyframes stairs {0% {transform: translateX(0) translateY(0);}100% {transform: translateX(40px) translateY(-40px);}
}
实现小球
css">.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;
}
实现小球动画
css">@keyframes bounce {0%,100% {transform: translateY(-1px);}50% {transform: translateY(-40px);}
}
完整代码下载
完整代码下载
