实现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. [javascript]什么是闭包？

    http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-closure-2127.html

  2. c++ stl sort example

    c++ stl sort函数使用举例: #include <iostream> #include<vector> #include<algorithm> #incl ...

  3. Description Resource Path Location Type Java compiler level does not match the version of the installed Java project facet Unknown Faceted Project Problem (Java Version Mismatch)

    project 编译问题,需要三处的jdk版本要保持一致,才能编译通过. 1.在项目上右键properties->project Facets->修改右侧的version  保持一致 2. ...

  4. Office加载项安装

    出自我的个人主页 Alvin Blog 前言 Excel加载项离不开安装,Excel加载项本身安装及其简单,但这是在申请下来Office开发者账户之后,再次之前都得自行安装 线上安装 微软申请开发者账 ...

  5. SQL查询某一字段重复的数据

    查询出重复记录 select * from 数据表 WHERE 重复记录字段 in ( select 重复记录字段 from  数据表 group by 重复记录字段 having count(重复记 ...

  6. 打开excl链接时总是出现问题

    主要现象:1.提示"发生了意外错误":2.报错"由于本机限制无法打开链接" 原因: 这个是由于默认浏览器异常造成的,就是比如你下载了新的浏览器,然后为默认浏览器 ...

  7. MySQL安装和简单操作

    MySQL数据库安装与配置详解 MySQL的安装请参考下面这篇博客,讲述的非常详细,各种截图也很清晰.http://www.cnblogs.com/sshoub/p/4321640.html MySQ ...

  8. **611. Valid Triangle Number three pointer O(n^3) -> square(binary search larget number smaller than target)

    Given an array consists of non-negative integers, your task is to count the number of triplets chose ...

  9. .net core 下调用.net framework框架的WCF方法写法

    通过添加服务引用后生成的代码,可以得知首先要设置Basic连接写法的属性,并且设置WCF服务的地址: 我在这里建立工厂类如下: using System; using System.ServiceMo ...

  10. B. Qualifying Contest_排序

    B. Qualifying Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...