实现div上下跳动时，底部阴影随着变化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3实现带阴影的弹球</title>

    <style type="text/css">

        .box{

            width: 400px;

            height: 300px;

            border: 1px #cccccc solid;

            /*距上下30，左右居中*/

            margin: 30px auto;

            /* 设置相对定位，以便子元素使用绝对定位 */

            position: relative;

        }

        .box .ball, .box .ball:after{

            border-radius: 50%;

            position: absolute;

            left: 50%;

            background: linear-gradient(top, #ffffff, #999999);

            background: -webkit-linear-gradient(top, #ffffff, #999999);

            background: -moz-linear-gradient(top, #ffffff, #999999);

            background: -ms-linear-gradient(top, #ffffff, #999999);

            background: -o-linear-gradient(top, #ffffff, #999999);

        }

        .box .ball{

            width: 140px;

            height: 140px;

            top:;

            /*因为是绝对定位，距左边百分之50，这里距左是左边距盒子左边，所以这里需要通过margin向左移动宽度一般的距离*/

            margin-left: -70px;

            -webkit-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;

            -moz-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;

            box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;

            -webkit-animation: jump 5s ease-in infinite;

            -o-animation: jump 5s ease-in infinite;

            animation: jump 5s ease-in infinite;

            /*让球遮住阴影（使球显示在阴影上方）*/

            z-index:;

        }

        .box .ball:after{

            content: "";

            display: block;

            width: 70px;

            height: 30px;

            border-radius: 50%;

            top: 10px;

            margin-left: -35px;

        }

        .box .shadow{

            width: 80px;

            height: 60px;

            border-radius: 50%;

            position: absolute;

            bottom:;

            left: 50%;

            margin-left: -40px;

            background: rgba(20, 20, 20, .1);

            -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);

            -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);

            box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);

            -webkit-transform: scaleY(.3);

            -moz-transform: scaleY(.3);

            -ms-transform: scaleY(.3);

            -o-transform: scaleY(.3);

            transform: scaleY(.3);

            -webkit-animation: shrink 5s ease-in infinite;

            -o-animation: shrink 5s ease-in infinite;

            animation: shrink 5s ease-in infinite;

        }

        @-webkit-keyframes jump {

            0%{ top:; }

            65%{ top: 160px; height: 140px; }

            75%{ height: 120px; }

            100%{ top:; height: 140px; }

        }

        @-o-keyframes jump {

            0%{ top:; }

            65%{ top: 160px; height: 140px; }

            75%{ height: 120px; }

            100%{ top:; height: 140px; }

        }

        @keyframes jump {

            0%{ top:; }

            65%{ top: 160px; height: 140px; }

            75%{ height: 120px; }

            100%{ top:; height: 140px; }

        }

        @-webkit-keyframes shrink {

            0%{ width: 90px; height: 60px; }

            65%{ width: 10px; height: 5px; margin-left: -5px; background: rgba(20, 20,20, .3);

                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);

                -moz-box-shadow: 0 0 25px 20px 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);

                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);

                -moz-box-shadow: 0 0 25px 20px 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. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  2. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  3. CSS——小三角带边框带阴影

    乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果.但是注意,这个小三角本身就是边框制作出来的.怎么能在小三角的外边再加一层小边框呢.那就必须再 ...

  4. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

  5. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  6. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  7. QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）

    QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...

  8. 带阴影的圆形 QLabel

    带阴影的圆形 Label 来自: 公孙二狗

  9. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

随机推荐

  1. ansible使用2-命令

    并发与shell # bruce用户身份,-m指定模块名称,默认模块名command,all所有目标主机,也可以指定组名或者主机名 ansible all -m ping -u bruce # bru ...

  2. C#实现屏幕指定区域截屏

    //string Opath = @"C:/Picture";            //if (Opath.Substring(Opath.Length - 1, 1) != @ ...

  3. [topcoder]TheGridDivTwo

    http://community.topcoder.com/stat?c=problem_statement&pm=13628&rd=16278 标程是BFS,我用DFS,都可解. 这 ...

  4. [转]Android中Spinner下拉列表（使用ArrayAdapter和自定义Adapter实现）

    今天学习了Spinner组件,使用Spinner相当于从下拉列表中选择项目,下面演示一下Spinner的使用(分别使用ArrayAdapter和自定义Adapter实现) (一):使用ArrayAda ...

  5. shell脚本学习（1）列出一组IP内所有活动主机

    1.用ping命令编写脚本来查询一组IP地址同时检查他们是否处于活动状态 [zhi@centos7 ~]$ vi CheckHostStatus.sh [zhi@centos7 ~]$ ll 总用量 ...

  6. 电路设计软件 电路模拟软件 sPlan , LTspice 等

    电路设计/PCB绘制 立创EDA https://lceda.cn/ sPlan http://www.electronic-software-shop.com/splan-70.html?langu ...

  7. 使用Atom编写Makedown

    Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器. Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 作为一个Gi ...

  8. Last_IO_Errno: 1032

    (一):更新找不到记录 1032   Last_SQL_Errno: 1032                Last_SQL_Error: Could not execute Update_rows ...

  9. SQL SERVER 下：1、递归查询父分类下的各个子分类。 2、查询每个商品分类中最贵的前两个商品SQL

    1.递归查询父分类下的各个子分类.表设计: SQL: --CTE 语句(适用于MSSQL2005以后版本) with cte_testNavi(Id,Name,Pid ) as ( --这是查询语句 ...

  10. Poj(1521),哈夫曼编码

    题目链接:http://poj.org/problem?id=1521 这里,网上有很多博客都有写,很多人没有建树,直接就是求一下这个哈夫曼编码的长度,的确很巧妙,我也用的这个方法,但是,几乎所有博客 ...