本文主要是介绍[CSS动效]弹跳小球，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>彈跳小球</title><style>body {width: 100vw;height: 100vh;background: #34495e;display: flex;justify-content: center;align-items: center;}div {width: 100px;height: 100px;background: radial-gradient(at center, #e67e22, #e74c3c);border-radius: 50%;animation-name: bounce;animation-duration: 1s;animation-iteration-count: infinite;animation-direction: alternate-reverse;}section {width: 300px;height: 40px;background: rgba(0, 0, 0, 0.3);position: absolute;transform: translateY(50px);z-index: -1;border-radius: 50%;filter: blur(5px);animation-name: shadow;animation-duration: 1s;animation-iteration-count: infinite;animation-direction: alternate-reverse;}@keyframes shadow {to {width: 300px;height: 20px;filter: blur(35px);background: rgba(0, 0, 0, 0.1);}}@keyframes bounce {to {transform: translateY(-200px);}}</style></head><body><div></div><section></section></body>
</html>
这篇关于[CSS动效]弹跳小球的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
