如何实现平滑的“box-box shadow 动画”动画效果

来源：蜘蛛抓取(WebSpider) 时间：2017-01-21 02:03 标签： box shadow
12个创新的纯CSS3进度条特效 动画效果很漂亮 | 设计达人
爱设计，爱分享。
12个创新的纯CSS3进度条特效 动画效果很漂亮
赞助商链接
进度条是很常用的一个用户体验项，用于表示事件的处理或加载状态，制作这些loading进度条我们通常会使用GIF图片来实现，但是这方法也有一些弊端，比如我要放大或改变颜色，这样就不好处理了。
要解决这些问题最好就是用代码来实现了，现在已经流行起来，我们是否也尝试一下用CSS来实现呢？方法是有的，而且很简单，看看今天设计达人网为大家分享的12个使用纯CSS3编写的进度条，loading图标和动画都很棒哦！如下图：
这里我特别制作成GIF图片方便大家浏览，这些loading的icon 动画各有特色，有充电状态、眼睛转动、时钟转动动画、加精的点点点等等，都是很有创意的设计哦！
是不是很好看而又创新呢？那么我们如何使用这些loading进条度应用在上呢？下面我以左上角的时钟为例子，代码如下：
进度条CSS代码：
/* Timer*/
height: 24
background-color:
box-shadow: inset 0px 0px 0px 2px #
border-radius: 50%;
margin: 38/* Not necessary- its only for layouting*/
.timer:after, .timer:before{
content:"";
background-color: #
.timer:after{
-webkit-transform-origin: 1px 1
-moz-transform-origin: 1px 1
transform-origin: 1px 1
-webkit-animation: minhand 2
-moz-animation: minhand 2
animation: minhand 2
.timer:before{
-webkit-transform-origin: 1px 1
-moz-transform-origin: 1px 1
transform-origin: 1px 1
-webkit-animation: hrhand 8
-moz-animation: hrhand 8
animation: hrhand 8
@-webkit-keyframes minhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
@-moz-keyframes minhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
@keyframes minhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
@-webkit-keyframes hrhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
@-moz-keyframes hrhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
@keyframes hrhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
HTML代码：
&div class="timer"&&/div&
怎么样？是不是很简单呢？日后使用这些CSS编写的loading进度条就非常方便的改大小和颜色啦！
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，欢迎转载。
印刷工艺必备神技
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群CSS3动画制作阴影图像悬停效果
下载资源()次
阅读次数()次
发布时间：
用法简介：
CSS3动画制作阴影图像悬停效果。文件引用：.css3gallery&img{
-webkit-transform:scale(0.8);&/*Webkit:&Scale&down&image&to&0.8x&original&size*/
-moz-transform:scale(0.8);&/*Mozilla&scale&version*/
-o-transform:scale(0.8);&/*Opera&scale&version*/
-webkit-transition-duration:&0.5s;&/*Webkit:&Animation&duration*/
-moz-transition-duration:&0.5s;&/*Mozilla&duration&version*/
-o-transition-duration:&0.5s;&/*Opera&duration&version*/
opacity:&0.7;&/*initial&opacity&of&images*/
margin:&0&10px&5px&0;&/*margin&between&images*/
.css3gallery&img:hover{
-webkit-transform:scale(1.1);&/*Webkit:&Scale&up&image&to&1.2x&original&size*/
-moz-transform:scale(1.1);&/*Mozilla&scale&version*/
-o-transform:scale(1.1);&/*Opera&scale&version*/
box-shadow:0px&0px&30px&&/*CSS3&shadow:&30px&blurred&shadow&all&around&image*/
-webkit-box-shadow:0px&0px&30px&&/*Safari&shadow&version*/
-moz-box-shadow:0px&0px&30px&&/*Mozilla&shadow&version*/
opacity:&1;
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。　　　　transition属性是一个很强大的3d动画属性，我动手试了一下，很多在网上很火的网页动画都可以用这个属性实现，只能说这个属性是在是太强大啦，本人在学习次属性之后才知道自己对css3的认识还是偏少，现在我给大家介绍并实际实现下该属性。
　　　　transition字面意思是变迁、变换、过度的意思，所以transition属性也离不开这个大致意思，其中该属性中的重要属性是：　　
　　　　　　　　transition-property:指定过度的元素; 如：transition-property:background,就是指background属性参与这个过度。
　　　　　　　　transition-duration：指定这个过度持续时间;
　　　　　　　　transition-delsy:延迟过度时间;
　　　　　　　　transition-timing-function:指定时间过度类型; 如：ease\linear\ease-in\ease-out\ease-in-out\　　　　其中：ease是越来越慢，linear是匀速　　　　　　　　运动，ease-in是先慢后快，ease-out是先快后慢，ease-in-out是先慢后快再慢
　　　　　　　　transition：all 0.3　　其中all是指全部属性参与，0.3是过度时间，ease是过度类型；
　　　　现在应该对这个属性有了个基本的了解，其实知道了上述属性，我们就可以动手做一些页面上的动画效果
text-align:
padding-top: 150
margin-top: 30
margin-bottom: 30
text-align:
width: 175
height:175
background-color:
margin-top: 50
margin-left: 50
text-align:
transform:rotate(10deg);
transition:all 0.5s ease-
box-shadow: 2px 2px 4px #9932CC;
padding: 5
.imgts:hover{
transform:rotate(0deg) scale(1.05);
box-shadow: 15px 15px 21
width: 200
height: 40
background-color:
transition-property: background-
transition-duration: 0.01s;
transition-timing-function:
.divimg1:hover{
background-color:
　　　　上述代码实现了鼠标悬停图片旋转和鼠标悬停改变颜色的功能，这个是不是很好用。
　　注：box-shadow是盒阴影属性，transform:rotate()属性在/chrxc/p/5121347.html提过
　　　　　　　　
阅读(...) 评论()纯CSS3实现的8种Loading动画效果
纯CSS3实现的8种Loading动画效果
效果如图：
HTML代码部分（所有效果共用）：
代码如下:&div class="loader"&加载中...&/div&
我们从左到右从上到下列出效果对应的CSS代码。
1#效果CSS代码：代码如下:.load1 .loader,.load1 .loader:before,.load1 .loader:after {
background: #FFF;
-webkit-animation: load1 1s infinite ease-in-
animation: load1 1s infinite ease-in-
height: 4}.load1 .loader:before,.load1 .loader:after {
content: '';}.load1 .loader:before {
left: -1.5}.load1 .loader {
text-indent: -9999
margin: 40%
font-size: 11
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;}.load1 .loader:after {
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;}@-webkit-keyframes load1 {
box-shadow: 0 0 #FFF;
box-shadow: 0 -2em #
}}@keyframes load1 {
box-shadow: 0 0 #FFF;
box-shadow: 0 -2em #
}}2#效果CSS代码：代码如下:.load2 .loader,.load2 .loader:before,.load2 .loader:after {
border-radius: 50%;}.load2 .loader:before,.load2 .loader:after {
content: '';}.load2 .loader:before {
width: 5.2
height: 10.2
background: #0
border-radius: 10.2em 0 0 10.2
left: -0.1
-webkit-transform-origin: 5.2em 5.1
transform-origin: 5.2em 5.1
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;}.load2 .loader {
font-size: 11
text-indent: -99999
margin: 30%
height: 10
box-shadow: inset 0 0 0 1em #FFF;}.load2 .loader:after {
width: 5.2
height: 10.2
background: #0
border-radius: 0 10.2em 10.2em 0;
-webkit-transform-origin: 0px 5.1
transform-origin: 0px 5.1
-webkit-animation: load2 2
animation: load2 2}@-webkit-keyframes load2 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}@keyframes load2 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}3#效果CSS代码：代码如下:.load3 .loader {
font-size: 10
margin: 30%
text-indent: -9999
height: 11
border-radius: 50%;
background: #
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-webkit-animation: load3 1.4
animation: load3 1.4}.load3 .loader:before {
width: 50%;
height: 50%;
background: #FFF;
border-radius: 100% 0 0 0;
content: '';}.load3 .loader:after {
background: #0
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
bottom: 0;
right: 0;}@-webkit-keyframes load3 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}@keyframes load3 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}4#效果CSS代码：代码如下:.load4 .loader {
font-size: 20
margin: 45%
border-radius: 50%;
text-indent: -9999
-webkit-animation: load4 1.3
animation: load4 1.3}@-webkit-keyframes load4 {
box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #
}}@keyframes load4 {
box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #
box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #
box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #
&p&5#效果CSS代码：代码如下:.load5 .loader {
margin: 46%
font-size: 25
border-radius: 50%;
text-indent: -9999
-webkit-animation: load5 1.1
animation: load5 1.1}@-webkit-keyframes load5 {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #
}}@keyframes load5 {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #
}}6#效果CSS代码：
代码如下:.load6 .loader {
font-size: 90
text-indent: -9999
border-radius: 50%;
margin: 33%
-webkit-animation: load6 1.7
animation: load6 1.7}@-webkit-keyframes load6 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
}}@keyframes load6 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #
7#效果CSS代码：代码如下:&/p&
&p&.load7 .loader:before,.load7 .loader:after,.load7 .loader {
border-radius: 50%;
width: 2.5
height: 2.5
-webkit-animation-fill-mode:
animation-fill-mode:
-webkit-animation: load7 1.8s infinite ease-in-
animation: load7 1.8s infinite ease-in-}.load7 .loader {
font-size: 10
text-indent: -9999
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;}.load7 .loader:before {
left: -3.5}.load7 .loader:after {
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;}.load7 .loader:before,.loader:after {
content: '';
top: 0;}@-webkit-keyframes load7 {
box-shadow: 0 2.5em 0 -1.3em #
box-shadow: 0 2.5em 0 0 #FFF;
}}@keyframes load7 {
box-shadow: 0 2.5em 0 -1.3em #
box-shadow: 0 2.5em 0 0 #FFF;
}}8#效果CSS代码：代码如下:.load8 .loader {
font-size: 10
text-indent: -9999
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #
-webkit-animation: load8 1.1
animation: load8 1.1}.load8 .loader,.load8 .loader:after {
border-radius: 50%;
height: 10}@-webkit-keyframes load8 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}@keyframes load8 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
Copyright & 2016 phpStudy

我要回帖

更多关于 box shadow 的文章

 

随机推荐