<!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. OpenStack Austin 峰会观察：OpenStack as IaaS 已是过去，Solutions on OpenStack 才是未来

    虽然搞 OpenStack 前后也有几年,但是今年在美国 Austin 举办的 OpenStack Summit 我还是第一次参加.回来之后,一直还在回味,觉得要写点东西,将我在这次峰会上的观察和思考 ...

  2. TeamTalk源码分析之login_server

    login_server是TeamTalk的登录服务器,负责分配一个负载较小的MsgServer给客户端使用,按照新版TeamTalk完整部署教程来配置的话,login_server的服务端口就是80 ...

  3. libsvm Minist Hog 手写体识别

    统计手写数字集的HOG特征 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ 这篇文章是模式识别的小作业,利用sv ...

  4. DPM检测模型 VoC-release 5 linux 下编译运行

    (转载请注明作者和出处 楼燚(yì)航的blog :http://www.cnblogs.com/louyihang-loves-baiyan/ 未经允许请勿用于商业用途) DPM目前使非神经网络方法 ...

  5. Codeforces 549G Happy Line[问题转换　sort]

    G. Happy Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. AC日记——字符串判等 openjudge 1.7 17

    17:字符串判等 总时间限制:  1000ms 内存限制:   65536kB 描述 判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等. 输入 两行,每行包含一个字符串. 输出 ...

  7. AJAX、JQUERY 工作遇到的知识点

    泽浜商城关联公司知识点总结 1.关联公司的时候,根据用户ID,在数据库中用户表中关联公司ID,公司的列表通过查找公司表 ,然后抓取所有公司的名称和ID.关联的时候只需要根据公司name和ID进行关联. ...

  8. Linux—C内存管理

    程序(可执行文件)存储结构与进程存储结构: 查看文件基本情况:file fileName.查看文件存储情况:size fileName(代码区text segment.全局初始化/静态数据区data ...

  9. （原创）mybatis学习一，夯实基础

    一,what?(是什么) MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可 ...

  10. subtable