实现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. 给大家推荐一个.Net的混淆防反编译工具ConfuserEx

    给大家推荐一个.Net的混淆防反编译工具ConfuserEx. 由于项目中要用到.Net的混淆防反编译工具. 在网上找了很多.Net混淆或混淆防反编译工具,如.NET Reactor.Dotfusca ...

  2. 被遗忘的设计模式——空对象模式（Null Object Pattern）

    GoF(四人帮)那本<设计模式 可复用面向对象软件的基础>可谓是设计模式方面的经典之作,其中介绍的23种设计模式, 也可谓是经典中的经典.但是,设计模式的种类绝不仅仅是这23种,除此之外还 ...

  3. 对json数据进行排序

    项目有这样一个需要对数据库取出的数据按sort字段进行显示:这个时候想起来在JS中对json数据进行一个排序再进行数据填充可以实现此效果 var colId = "sort";// ...

  4. ffmpeg 安装和参数介绍

    0.说明: 1).configure,这一步一般用来生成 Makefile,为下一步的编译做准备,你可以通过在 configure 后加上参数来对安装进行控制,比如代码:./configure –pr ...

  5. VR社交软件测试-AltspaceVR

    该VR社交软件中的主界面主要分为,Events:事件:Activities:多人游戏:Words:别人创建的虚拟世界.进入游戏后可以进入场景与世界各地的人进行交谈,以虚拟3D人物的方式显示用户,具有较 ...

  6. Git学习环境搭建和git对用户的增删改查命令

    git安装 windows下安装git git下载进入网址: https://git-scm.com/downloads 点击下载,进行安装,安装成功,你会看到图标,点击进入到git bash 查看g ...

  7. 搭建ssm中遇到的问题

    1.多模块pom.xml文件无效 原因是没有指定模块

  8. Java常见加密技术的密钥与加密串长度

    Java常见的Java方式 1.Base64编码 2.十六进制(Hex)编码 3.MD消息摘要 4.DES加密 5.3DES加密 6.AES加密 6.RSA加密

  9. jquery 表单事件

    .blur() 当元素失去焦点的时候触发事件. .blur(handler(eventObject)) handler(eventObject) 每当事件触发时候执行的函数. .blur([event ...

  10. vue的生命周期和路由守卫

    组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed   还有 ...