HTML+CSS实现弹跳球效果
效果图如下：
HTML部分源代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹跳的小球</title><link rel="stylesheet" href="style.css"></head><body><div class="box"><div class="ball"></div><div class="shadow"></div></div></body></html>
CSS部分源代码如下：
:root {--background-color: #2c3e50;--ball-color1: #ffae00;--ball-color2: #473e09;}* {margin: 0;padding: 0;}html {font-size: 14px;}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;}.box {width: 400px;height: 400px;background-color: #FFF;position: relative;}.ball {position: absolute;width: 160px;height: 160px;background: radial-gradient(circle at 50px 50px, var(--ball-color1), var(--ball-color2));border-radius: 50%;top: 10px;left: 50%;transform: translate(-50%);animation: jump 1s ease-in-out infinite;z-index: 2;}@keyframes jump {0%, 100% {top: 10px;}50% {top: 200px;}}.shadow {position: absolute;width: 100px;height: 100px;background-color: #10171d;top: 90%;left: 50%;transform: translate(-50%, -50%) rotateX(70deg);filter: blur(20px);border-radius: 50%;z-index: 1;animation: change 1s ease-in-out infinite;}@keyframes change {0%, 100% {width: 100px;height: 100px;opacity: 0.5;}50% {width: 80px;height: 80px;opacity: 0.8;}}
如果觉得《HTML+CSS实现弹跳球效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
