HTML+CSS实现弹跳球效果

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实现弹跳球效果相关推荐

分享一个HTML5画布实现的超酷文字弹跳球效果
日期:2012/03/05 在线演示本地下载今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML5的画布来实现动画及其图形.整个效果使用小球来组 ...
html+css+javascript弹跳球小游戏
1.index.html <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
纯css实现悬浮球效果
效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
JavaScript(十二)——弹跳球进阶版
本章为上一章弹跳球进阶练习版,请先根据要求自行完成代码. 项目简介我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性,我们为它添加一个由玩家控制的"恶魔圈",如果恶魔 ...
3dsmax动画九、弹跳球动画。
①创建一个球体,并且改变它的支点. 如果不勾选Base To Pivot,则创建的球体,支点在球的中心. 如果勾选Base To Pivot,则创建的球体,支点在球的底部. ②将球归零. 左键点击球体 ...
【Matlab/Simulink笔记】入门练习——搭建一个弹跳球实验
介绍第一个实例太过简单,而且看不出什么实际效果,因此这次选了一个比较贴近中学物理的实验,弹跳球实验这个实验是在观看一位老师的入门课程时想尝试的实验:MATLAB/Simulink基础入门视频教程: ...
昂首那瞬间，球已停止转动——HTML5实现3D球效果
本文乃原创demo,转载请注明出处:http://blog.csdn.net/qingfeilee/article/details/7437972,使用代码请保留作者署名,谢谢! 曲终人即散,每当看到 ...

HTML+CSS实现弹跳球效果

HTML+CSS实现弹跳球效果相关推荐

最新文章

热门文章