<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

.box{
width:400px;
height: 400px;
border: 1px solid #ccc;
margin:30px auto;
position: relative;
}
/*绘制球*/
.box .ball{
width:140px;
height: 140px;
border-radius: 50%;
position: absolute;
top: 0px;
left: 50%;
background:-webkit-linear-gradient(top,#fff, #999);/*渐变色*/
box-shadow: inset 0 0 30px #999,inset 0 -15px 70px #999;/* 阴影*/
margin-left: -70px;
-webkit-animation: jump 2s ease-in-out infinite;/*链接球动画*/
z-index: 1;
}
/*利用伪类加强球的动画效果*/
.box .ball:after{
content: "";
display: block;
width: 70px;
height: 30px;
border-radius: 50%;
position: absolute;
top:10px;
left: 50%;
margin-left: -35px;
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);
transform: scaleY(.3);
-webkit-animation: shrink 2s ease-in-out infinite; /*链接阴影动画*/
}
/*球的动画*/
@-webkit-keyframes jump{
0%{
top:0;
-webkit-animation-timing-function:ease-in ;
}
65%{
top:240px;
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>

CSS3绘制弹球动画效果的更多相关文章

  1. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  2. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  3. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  4. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  5. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  6. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  8. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. 最简化模型——css3分阶段动画效果(经过实测)

    body {    background: #dcdcdc;    -webkit-animation: colorin 5s; /* chrome调用属性 */    animation: colo ...

随机推荐

  1. 使用TCMalloc的堆栈检查

    在前一篇译文<TCMalloc:线程缓冲的Malloc>详细讲解了TCMalloc的工作原理和特点,今天翻译<heap-checking using tcmalloc>,了解T ...

  2. Python定时任务框架APScheduler 3.0.3 Cron示例

    APScheduler是基于Quartz的一个Python定时任务框架,实现了Quartz的所有功能,使用起来十分方便.提供了基于日期.固定时间间隔以及crontab类型的任务,并且可以持久化任务.基 ...

  3. TFS 2013 生成（构建）历史记录保持策略(Retention Policy)

    TFS服务器通过自动构建,实现软件生成和发布的自动化过程,这一直是TFS系统中非常重要的一个功能模块.近年来发布的TFS版本,都在自动化构建方面大幅增强了相应的功能.在这篇博客里我主要总结TFS 20 ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. GitHub注册流程（中英对比）

    GitHub注册流程(中英对比) 注明:为方便完成注册,将以中英文网页截图对应展示. 1. 注册邮箱:        点击GitHub官网进行邮箱注册. 2. 制定个人计划:        页面跳转至 ...

  6. 在Windows Azure虚拟机上开发Windows 8 应用

    前提条件 Windows Azure开发者账号:如果您拥有微软MSDN Subscription账户,那么意味着您可免费申请Windows Azure开发者账号. 创建虚拟机 点击Windows Az ...

  7. stanford coursera 机器学习编程作业 exercise 3（逻辑回归实现多分类问题）

    本作业使用逻辑回归(logistic regression)和神经网络(neural networks)识别手写的阿拉伯数字(0-9) 关于逻辑回归的一个编程练习,可参考:http://www.cnb ...

  8. usb驱动开发21之驱动生命线

    现在开始就沿着usb_generic_driver的生命线继续往下走.设备的生命线你可以为是从你的usb设备连接到hub的某个端口时开始,而驱动的生命线就必须得回溯到usb子系统的初始化函数usb_i ...

  9. 【点滴积累，厚积薄发】windows schedule task的最小时间间隔是多少？

    在一些业务系统中,经常会出现一些需要定时运行的任务,业界已有很多优秀的选择,比如windows schedule task,Quartz等等.在以前在新蛋的时候用的是内部封装的JobConsole,非 ...

  10. 添加JSON Data到已经存在的JSON文件中

    早上在学习<Post model至Web Api创建或是保存数据>http://www.cnblogs.com/insus/p/4343833.html ,如果你第二添加时,json文件得 ...