球球动画

最新推荐文章于 2022-09-16 18:20:23 发布

兔子零-A酱

最新推荐文章于 2022-09-16 18:20:23 发布

阅读量329

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43764814/article/details/100046246

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.box{
    width: 400px;
    height: 300px;
    border: 1px solid #0cc;
    position: relative;
    margin:30px auto;
}
.box .ball{
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    left:50%;
    top:0;
    margin-left: -70px;
    background: -webkit-linear-gradient(top,#fff,#999);
    box-shadow: inset 0 0 30px #999,inset 0 -15px 70px #999;
    -webkit-animation:jump 1s ease-in-out infinite;
    z-index: 1;
}
.box .ball:after{
    content:"";
    display: block;
    width: 70px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left:50%;
    margin-left: -35px;
    top:10px;
    background: -webkit-linear-gradient(#fff,#ccc);
}
.shadow{
    width: 80px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left: -40px;
    background:rgba(20,20,20,.1);
    box-shadow:0 0 25px 20px rgba(20,20,20,.1);
    -webkit-transform:scaleY(.3);
    -webkit-animation:shrink 1s infinite;
}
@-webkit-keyframes jump{
    0%{top:0;-webkit-animation-timing-function:ease-in;}
    65%{top:160px;height: 140px;}
    75%{height: 120px;}
    100%{top:0;height: 140px;}
}
@-webkit-keyframes shrink{
    0%{width: 90px;height:60px;-webkit-animation-timing-function:ease-in;}
    65%{width: 10px;height: 5px;margin-left:-5px;background:rgba(20,20,20,.3);box-shadow:0 0 25px 20px rgba(20,20,20,.3);}
    100%{width: 90px;height: 60px;background:rgba(20,20,20,.1);box-shadow:0 0 25px 20px rgba(20,20,20,.1);}
}
</style>
</head>
<body>
    <div class="box">
        <div class="ball"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>