效果图
制作步骤
做个球放在网页中央
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #b2bec3;
display: flex;
justify-content: center;
align-items: center;
}
div.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at center,
#74b9ff,#0984e3);
}
</style>
<div class="ball"></div>
这一步完成后效果
让球跳起来
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #b2bec3;
display: flex;
justify-content: center;
align-items: center;
}
div.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at center,
#74b9ff,#0984e3);
animation:bounce 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
@keyframes bounce{
to{
transform: translateY(-300px);
}
}
</style>
<div class="ball"></div>
这一步完成后效果
加个落地阴影
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #b2bec3;
display: flex;
justify-content: center;
align-items: center;
}
div.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at center,
#74b9ff,#0984e3);
animation:bounce 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
div.shadow{
position: absolute;
z-index: -1;
width: 100px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.5);
filter: blur(5px);
transform: translateY(20px);
}
@keyframes bounce{
to{
transform: translateY(-300px);
}
}
</style>
<div class="ball"></div>
<div class="shadow"></div>
加过的效果
让阴影更加自然(加上动效)
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #b2bec3;
display: flex;
justify-content: center;
align-items: center;
}
div.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at center,
#74b9ff,#0984e3);
animation:bounce 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
div.shadow{
position: absolute;
z-index: -1;
width: 100px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.5);
filter: blur(5px);
transform: translateY(20px);
animation:shadow 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
@keyframes bounce{
to{
transform: translateY(-300px);
}
}
@keyframes shadow{
to{
rgba(0,0,0,.1);
filter: blur(30px);
}
}
</style>
<div class="ball"></div>
<div class="shadow"></div>
最终效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限弹动小球</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #b2bec3;
display: flex;
justify-content: center;
align-items: center;
}
div.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(at center,
#74b9ff,#0984e3);
animation:bounce 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
div.shadow{
position: absolute;
z-index: -1;
width: 100px;
height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.5);
filter: blur(5px);
transform: translateY(20px);
animation:shadow 2s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
@keyframes bounce{
to{
transform: translateY(-300px);
}
}
@keyframes shadow{
to{
rgba(0,0,0,.1);
filter: blur(30px);
}
}
</style>
</head>
<body>
<div class="ball"></div>
<div class="shadow"></div>
</body>
</html>
本博客其他文章推荐
如果有一屏幕的爱心,你愿意送给谁?(简单实现原生js、css随机生成521个心)
maven新手上路–创建webapp项目,引入jstl、el依赖及el不解析的问题解决(详细图文)