<!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. Hadoop 基准测试与example

    #pi值示例 hadoop jar /app/cdh23502/share/hadoop/mapreduce2/hadoop-mapreduce-examples--cdh5. #生成数据 第一个参数 ...

  2. 解决AutoCAD2010在VS2010上无法命中断点

    AutoCAD 2010的二次开发告一段落,现在整理一些开发中遇到的问题. 最早遇到的问题是关于AutoCAD 2010在VS 2010上无法调试.奇怪的是这问题只出现在我同事电脑上,我的电脑一切OK ...

  3. 【CSS】使用CSS选择器（第二部分）

    1. 使用结构性伪类选择器 使用结构性伪类选择器能够根据元素在文档中的位置选择元素.这类选择器都有一个冒号字符前缀(:),例如 :empty .它们可以单独使用,也可以跟其他选择器组合使用,如: p: ...

  4. NOIP2005过河[DP 状态压缩]

    题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...

  5. KSFramework：Unity3D开发框架快速入门

    KSFramework知识 https://github.com/mr-kelly/KSFramework KSFramework是一个整合KEngine.SLua和一些开发组件组成的全功能Unity ...

  6. SQL Server 索引设计指南

    https://msdn.microsoft.com/zh-cn/library/jj835095(v=sql.120).aspx#Nonclustered

  7. [No000001]一切都是最好的安排

    <一切都是最好的安排> 从前有一个国家,地不大,人不多,但是人民过着悠闲快乐的生活,因为他们有一位不喜欢做事的国王和一位不喜欢做官的宰相. 国王没有什么不良嗜好,除了打猎以外,最喜欢与宰相 ...

  8. O(1) 查询gcd

    我们来安利一个黑科技.(其实是Claris安利来的 比如我现在有一坨询问,每次询问两个不超过n的数的gcd. n大概1kw,询问大概300w(怎么输入就不是我的事了,大不了交互库 http://mim ...

  9. Centos5.8 iptables管理

    使用第三方提供的Centos5.8 vmx安装的虚拟机实例, 在安装Tomcat时发现启动后8080端口无法访问, 先检查是否selinux作了限制 查看selinux状态: sestatus 查看s ...

  10. HDU 1166 敌兵布阵

    B - 敌兵布阵 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...