星空网 > 软件开发 > 网页设计

使用CSS3动画模拟实现小球自由落体效果

使用纯CSS代码模拟实现小球自由落体效果:

html代码如下:

1 <div id="ballDiv">2   <div id="ball"></div>3 </div>

CSS样式代码:

/*ball样式*/#ballDiv{ height:400px; background-color:#333333;}#ball{ width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}@-webkit-keyframes ball{  0%{-webkit-transform:translate(0, 0);}  10%{-webkit-transform:translate(0, 330px); height:70px;}  20%{-webkit-transform:translate(50px, 50px); height:100px;}  30%{-webkit-transform:translate(50px, 330px); height:70px;}  40%{-webkit-transform:translate(100px, 100px); height:100px;}  50%{-webkit-transform:translate(100px, 320px); height:80px;}  60%{-webkit-transform:translate(150px, 150px); height:100px;}  70%{-webkit-transform:translate(150px, 320px); height:80px;}  80%{-webkit-transform:translate(200px, 200px); height:100px;}  90%{-webkit-transform:translate(200px, 300px); height:100px;}  100%{-webkit-transform:translate(250px, 300px); height:100px;}}

 




原标题:使用CSS3动画模拟实现小球自由落体效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

如何使用vat trn copy信息进行tax税务管理:https://www.kjdsnews.com/a/1311830.html
如何使用rfc、tax id和vat id在美国开展业务:https://www.kjdsnews.com/a/1311831.html
如何使用eu的vat登记要求提高您的税收合规性:https://www.kjdsnews.com/a/1311832.html
如何优化亚马逊店铺资源管理,收获最大利润:https://www.kjdsnews.com/a/1311833.html
如何优化vat 上市公司的财务管理:https://www.kjdsnews.com/a/1311834.html
大连德国vat注册:联系方式及申请流程介绍:https://www.kjdsnews.com/a/1311835.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
凤岗汽车站到松山湖风景区 松岗汽车站到凤凰山怎么坐车:https://www.vstour.cn/a/363193.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流