css小球落地阴影,CSS3实现带阴影的弹球

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

CSS3实现带阴影的弹球

.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); }

}

用CSS画一个带阴影的三角形的示例代码

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

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

百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果:

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

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

css3照片墙+曲线阴影

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

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

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

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

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

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

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

带阴影的圆形 QLabel

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

CSS3知识之阴影box-shadow

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

随机推荐

PHP入门二【PHP include 和 require的区别】

include (或 require)语句会获取指定文件中存在的所有文本/代码/标记,并复制到使用 include 语句的文件中.包含文件很有用,如果您需要在网站的多张页面上引用相同的 PHP.HTM ...

Node.js文件系统、路径的操作详解

17173 17173 2 75 2014-12-12T05:06:00Z 2014-12-12T05:06:00Z 21 2735 15595 www.17173.com 129 36 18294 ...

js事件委托，可以使新添加的元素具有事件(event运用)

miaov视频教程  http://study.163.com/course/courseMain.htm?courseId=231002 quot ...

Flex4 DataGrid实现可复制单元格，同时解决自定义GridItemRenderer出现1009错误的方法

原创内容,如需转载,请注明出处,谢谢 最近在项目中发现Flex的DataGrid不支持内容复制,在涉及到保护敏感数据时倒是很有用处,但大部分情况下,我们还是希望客户能够直接复制DataGrid单元格中 ...

进程通信之一 使用WM_COPYDATA C++及C#实现 z