<!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. [转] Finding the Best Programmer's Font

    原文 Finding the Best Programmer's Font

  2. 日常使用 Git 的 19 个建议[转]

    我使用Git已经有4年之久,在这里想分享一些实用的小技巧,希望能对大家有所帮助. 如果你对git一无所知,那么我建议先去读一下Git 常用命令速查.本篇文章主要适合有一定 git 使用基础的人群. 目 ...

  3. AI(Adobe Illustrator)简单入门——骷髅

    成果: 步骤如下: 一.椭圆工具画正圆 按住shift+alt画一个正圆. 二.圆角矩形工具画矩形 用圆角矩形工具画一个矩形,然后全选水平垂直对齐. 三.画眼睛 利用椭圆工具画一只眼睛,然后按住alt ...

  4. python log

    python的日志模块为logging,它可以将我们想要的信息输出保存到一个日志文件中. # cat log import logging logging.debug('This is debug m ...

  5. 用pygame学习初级python（二） 15.5.11

    闲得无聊,对第一版的东西做了一些修改,让它更像一个游戏,也具有一些可玩性. 项目的github地址:https://github.com/lfkdsk/BrainHole_pygame 1.人物类进行 ...

  6. Vim插件管理——Vundle

    Vim插件管理--Vundle 都说Vim时程序员写给自己的编辑器,其中的情结可想而知.身为一只程序狗CodingDoge,今天就让我带各位学习Vim的使用. vim因为其庞大而强劲的插件受到无比的推 ...

  7. C#类型转换运算符之 explicit implicit

    类型转换运算符 explicit和implicit用于声明用户定义的类型转换运算符,如果可以确保转换过程不会造成数据丢失,则可使用这两个关键字在用户定义的类型和其他类型之间进行转换. explicit ...

  8. guava函数式编程

    [Google Guava] 4-函数式编程 原文链接 译文链接 译者:沈义扬,校对:丁一 注意事项 截至JDK7,Java中也只能通过笨拙冗长的匿名类来达到近似函数式编程的效果.预计JDK8中会有所 ...

  9. noip模拟赛（一）密码

    密码 (pasuwado.pas/c/cpp) [问题描述] 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一只聪明的宠物,他打算把魔法使moreD的魔法书盗去,夺取mor ...

  10. JavaScript Number 对象

    JavaScript Number 对象 Number 对象 Number 对象是原始数值的包装对象. Number 创建方式 new Number(). 语法 var num = new Numbe ...