实现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. 算法练习-字符串转换成整数(实现atoi函数)

    练习问题来源 https://leetcode.com/problems/string-to-integer-atoi/ https://wizardforcel.gitbooks.io/the-ar ...

  2. Linux命令之创建文件夹3

    1)mkdir  fyr即可在当前目录下创建一个文件夹 2)在fyr文件夹下创建一个子目录 mkdir fyr/fyr1 注意:如果不存在父层目录直接创建对应父层目录下的子目录mkdir  FYR/f ...

  3. Centos 7.0_64bit 下安装 Zabbix server 3.0服务器的安装

    一.关闭selinux   修改配置文件/ etc / selinux / config,将SELINU置为禁用(disabled)   vim /etc/selinux/config  # This ...

  4. SAP CRM和C4C数据同步的两种方式概述:SAP PI和HCI

    SAP Cloud for Customer(C4C)和SAP其他传统产品进行数据同步的方式,如下图所示,可以使用SAP Netweaver Process Integration或者SAP HANA ...

  5. java 通过接口在后台管理器中生成数据

    需求:测试人员在后台批量添加数据很麻烦,特别是针对一款商品配置了英语,还需要手动添加法语.俄语.阿拉伯语,很麻烦,但是因为没有项目组配合,做个小工具批量生成数据就只有自己去研究了 第一步:通过抓包工具 ...

  6. hdu-2688 Rotate---树状数组+模拟

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2688 题目大意: 给你n数,(n<=3e6),有两个操作,Q为 当前有多少对数,满足严格递增, ...

  7. 【洛谷4717】【模板】快速沃尔什变换（FWT模板）

    点此看题面 大致题意: 有两个长度为\(2^n\)的数组\(A,B\),且\(C_i=\sum_{j⊕k==i}A_jB_k\)分别求出当\(⊕\)为\(or,and,xor\)时的\(C\)数组. ...

  8. PASCAL VOC数据集分析

    http://blog.csdn.net/zhangjunbob/article/details/52769381

  9. CharSquence 接口的作用，多态以增强String

    CharSquence 接口的作用,多态以增强String,CharSquence 可以多态定义 String StringBuffer StringBuilder.

  10. jQuery、Angluar、Avalon对比

    最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...