实现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. 测试驱动开发(TDD)及测试框架Mocha.js入门学习

    组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...

  2. redis笔记(一)

    redis安装 ubuntu:     apt-get install redis-server redis服务  :redis-server 启动客户端   :redis-cli redis简单知识 ...

  3. hive数据仓库建设

    hive数据仓库建设 1.设计原生日志表 原生日志表用来存放上报的原始日志,数据经过清洗加工后会进入到各个日志表中. 1.1 创建数据库 #创建数据库 $hive>create database ...

  4. Windows 静态IP脚本

    @echo off echo 快速设置IP地址和DNS为“静态” set 连接名称=以太网 set ip地址=192.168.1.80 set 子网掩码=255.255.255.0 set 网关地址= ...

  5. 0 - python简介

    Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  6. April 13 2017 Week 15 Thursday

    Happiness takes no account of time. 幸福不觉光阴过. Do you know the theory of relativity? If you know about ...

  7. DOM——获取元素的方式

    document.getElementById("id属性的值"): //可以通过元素的 id 来获取元素,返回的是一个元素对象 document.getElementByName ...

  8. javaweb基础(35)_jdbc处理oracl大数据

    一.Oracle中大数据处理 在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...

  9. 共变导数（Covariant Derivative）

    原文链接 导数是指某一点的导数表示了某点上指定函数的变化率. 比如,要确定某物体的速度在某时刻的加速度,就取时间轴上下一时刻的一个微小增量,然后考察速度的增量和时间增量的比值.如果这个比值比较大,说明 ...

  10. 第20章 USART—串口通讯—零死角玩转STM32-F429系列

    第20章      USART—串口通讯 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fi ...