shadow达成的各个能够阴影效果,3D旋转效果

一个超炫酷带阴影的 CSS/Sass 3D进度条

2017/10/13 · CSS · 进度条

原文出处: Rafael González   译文出处:码农网 – 小峰   

今天我们想向大家展示如何创建一些具有特殊3D外观的纯CSS进度条。不妨将本教程当作是一个高级的CSS练习,以更深入地了解更多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练你的创造性思维,并且在本教程中,我们将通过制作进度条并动画化来向大家展示一些如何创建更复杂形状的技巧。

注意:某些CSS属性仅在现代浏览器中受支持。IE仍然不支持transform-style:preserve-3d,这是一个用于创建嵌套3D结构的关键属性;所以进度条在IE浏览器中将是扁平/无效的。

浏览器支持:Chrome Firefox Internet Explorer Safari Opera

图片 1

在线演示   源码下载

我们将在本教程中使用Sass(与Compass一起使用),因此请确保设置并了解其基础知识:

  • 安装Sass和Sass Basics
  • 安装Compass Stylesheet Authoring Framework和Compass CSS3

如果你想对动画进度条使用完整的解决方案,那么你应该查看Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE,以获得出色的页面加载进度条。

为了生成所有必要的前缀,你可以使用像Autoprefixer或用于Sublime Text的插件。

我们将使用许多有趣的CSS属性,如transform,perspective和box-shadow。我们还将大量使用SASS,以节省生成进度条的位置和外观所需的很多时间。通过使用相对大小(em,百分比),我们可以确保进度条的大小易于调整。

css3 shadow实现的各种漂亮阴影效果,css3shadow

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的各种阴影效果</title>
<style>
body{padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}
a{font-weight: bold;color: #346AA8;}
a: hover, a: focus, a: active{text-decoration: none;}
.container{position: relative;z-index: 1;width: 600px;padding: 20px;margin: 0 auto;background: #FAF0D9;}
.container: after{content: "";display: block;clear: both;visibility: hidden;height: 0;font-size: 0;}
/* Shared styles*/.drop-shadow{position: relative;float: left;width: 40%;padding: 1em;margin: 2em 10px 4em;background: #fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.drop-shadow: before, .drop-shadow: after{content: "";position: absolute;z-index: -2;}
.drop-shadow p{font-size: 16px;font-weight: bold;}
/* Lifted corners*/.lifted{-moz-border-radius: 4px;border-radius: 4px;}
.lifted: before, .lifted: after{bottom: 15px;left: 10px;width: 50%;height: 20%;max-width: 300px;-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);}
.lifted: after{right: 10px;left: auto;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg);}
/* Curled corners*/.curled{border: 1px solid #efefef;-moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;border-radius: 0 0 120px 120px / 0 0 6px 6px;}
.curled: before, .curled: after{bottom: 12px;left: 10px;height: 55%;max-width: 200px;-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);-webkit-transform: skew(-8deg) rotate(-4deg);-moz-transform: skew(-8deg) rotate(-4deg);-o-transform: skew(-8deg) rotate(-4deg);transform: skew(-8deg) rotate(-4deg);}
.curled: after{right: 10px;left: auto;-webkit-transform: skew(8deg) rotate(4deg);-moz-transform: skew(8deg) rotate(4deg);-o-transform: skew(8deg) rotate(4deg);transform: skew(8deg) rotate(4deg);}
/* Perspective*/.perspective: before{left: 80px;bottom: 8px;width: 50%;height: 35%;max-width: 200px;-webkit-box-shadow: -80px 5px 10px rgba(0, 0, 0, 0.4);-moz-box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);-webkit-transform: skew(50deg);-moz-transform: skew(50deg);-o-transform: skew(50deg);transform: skew(50deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;}
.perspective: after{display: none;}
/* Raised shadow - no pseudo-elements needed*/.raised{-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
/* Curved shadows*/.curved: before{top: 10px;bottom: 10px;left: 0;right: 50%;-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);box-shadow: 0 0 15px rgba(0,0,0,0.6);-moz-border-radius: 10px / 100px;border-radius: 10px / 100px;}
.curved-vt-2: before{right: 0;}
.curved-hz-1: before{top: 50%;bottom: 0;left: 10px;right: 10px;-moz-border-radius: 100px / 10px;border-radius: 100px / 10px;}
.curved-hz-2: before{top: 0;bottom: 0;left: 10px;right: 10px;-moz-border-radius: 100px / 10px;border-radius: 100px / 10px;}
/* Rotated box*/.rotated{-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);}
.rotated : first-child: before{content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
</style>
<script>
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.async = true; ga.src = '';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div>;
<div class="container">
<h1><a href="">CSS drop-shadows without images</a></h1>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single hozitonal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
</body>
</html>

shadow实现的各种漂亮阴影效果,css3shadow !DOCTYPE html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title纯CSS3实现的各种阴影效果...

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>Document</title>
 <style>
        body {
            margin-top: 5em;
            text-align: center;
         color: #414142;
         background: rgb(246,241,232);
        任务一、制作多背景
         background-image: -mz-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("");
         background-image: -webkit-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("");
         background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("");
            background-size: cover;
        任务二、控制背景图像尺寸
       
        }
       
        h1, em, #information {
            display: block;
         font-size: 25px;
         font-weight: normal;
         margin: 2em auto;
        }
       
        a {
            color: #414142;
         font-style: normal;
         text-decoration: none;
         font-size: 20px;
        }
          
        a:hover {
            text-decoration: underline;
        }
          
        #container {
         margin: 0 auto;
         width: 1024px;
        }
         
        .wrapper {
            display: inline-block;
         width: 310px;
            height: 100px;
         vertical-align: top;
         margin: 1em 1.5em 2em 0;
         cursor: pointer;
         position: relative;
         font-family: Tahoma, Arial;
         -webkit-perspective: 4000px;
         -moz-perspective: 4000px;
         -ms-perspective: 4000px;
         -o-perspective: 4000px;
         perspective: 4000px;
        }
       
        .item {
            height: 100px;
         -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
         -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
         transform-style: preserve-3d;
        任务三、给每个列表项添加过渡动画效果
         -webkit-transition: -webkit-transform .6s;
         -moz-transition: -moz-transform .6s;
         -ms-transition: -ms-transform .6s;
         -o-transition: -o-transform .6s;
         transition: transform .6s;
        }
       
        .item:hover {
        任务四、悬浮状态改变每个列表项的transform效果
            -webkit-transform: translateZ(-50px) rotateX(95deg);
            -moz-transform: translateZ(-50px) rotateX(95deg);
            -ms-transform: translateZ(-50px) rotateX(95deg);
            -o-transform: translateZ(-50px) rotateX(95deg);
            transform: translateZ(-50px) rotateX(95deg);
        }
       
        .item img {
            display: block;
            position: absolute;
            top: 0;
            任务五、设置列表项图片的圆角和阴影效果
            border-radius:10px;
            box-shadow:4px 2px 6px #333333;

<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8"/>
<style type="text/css">

构建面

我们先从构建一个包含所有六个面的框开始。这个框将作为我们的主要容器,用来设置进度条的尺寸及其视点。我们还将使用一个包装器用于透视图,并且这个包装器的font-size属性将允许使用某些em单位魔法的帮助来扩展进度条。

为了确保所有的面都是我们3D空间的一部分,我们需要将transform-style: preserve-3d应用于框。

所以让我们从初始化一些颜色变量开始来编写样式吧:

$light-gray: #e0e0e0; $magenta: #ec0071; $white: #f5f5f5; .perspective { font-size: 5em; // sets the main scale size perspective: 12em; // sets the perspective perspective-origin: 50% 50%; text-align: center; } .bar { display: inline-block; width: 1em; height: 1em; margin-top: 1em; position: relative; transform: rotateX(60deg); // sets the view point transform-style: preserve-3d; // perspective for the children }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;
 
.perspective {
font-size: 5em; // sets the main scale size
perspective: 12em; // sets the perspective
perspective-origin: 50% 50%;
text-align: center;
}
 
.bar {
display: inline-block;
width: 1em;
height: 1em;
margin-top: 1em;
position: relative;
transform: rotateX(60deg); // sets the view point
transform-style: preserve-3d; // perspective for the children
}

现在,我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框,里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。

.bar { // -> The SCSS written before .bar-face { display: inline-block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba($light-gray, .6); // just to see what is happening } }

1
2
3
4
5
6
7
8
9
10
11
12
.bar {
// -> The SCSS written before
.bar-face {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba($light-gray, .6); // just to see what is happening
}
}

写标记并且确保它是可以访问的:

<div class="perspective"> <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face"/> <div class="bar-face"/> <div class="bar-face"/> <div class="bar-face"/> <div class="bar-face"/> <div class="bar-face"/> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
</div>
</div>

如果你有兴趣了解更多有关可访问性的信息,这篇文章(由Gez Lemon撰写)帮助我了很多: ‘Introduction to WAI ARIA’

        -webkit-transform: translateZ(50px);
           -moz-transform: translateZ(50px);
           -ms-transform: translateZ(50px);
           -o-transform: translateZ(50px);
           transform: translateZ(50px);
           -webkit-transition: all .6s;
           -moz-transition: all .6s;
           -ms-transition: all .6s;
           -o-transition: all .6s;
           transition: all .6s;
           width: 310px;
           height: 100px;
         }
       
        .item .information {
           display: block;
           position: absolute;
           top: 0;
           height: 80px;
           width: 290px;
           text-align: left;
           border-radius: 15px;
           padding: 10px;
           font-size: 12px;
           text-shadow: 1px 1px1px rgba(255,255,255,0.5);
           box-shadow: none;
           background: rgb(236,241,244);
           任务六、给底层显示文本的层级设置渐变效果
            background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
            background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
            background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

//css部分
html{
font-size:62.5%;
}
img{
width:300px;
height:300px;
}
#stage{

设置面

这是非常重要的一部分。进度条的面必须准确定向,这样当我们开始添加百分比填充时,就不会陷入困境。

Sass

.bar { // -> The SCSS from before .bar-face { // -> The SCSS from before transform-origin: 50% 100%; &.roof { transform: translateZ(1em); } &.front { transform: rotateX(-90deg); } &.right { left: auto; right: -.5em; width: 1em; transform: rotateX(-90deg) rotateY(90deg) translateX(.5em); } &.back { transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em); } &.left { width: 1em; transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
transform-origin: 50% 100%;
&.roof {
transform: translateZ(1em);
}
&.front {
transform: rotateX(-90deg);
}
&.right {
left: auto;
right: -.5em;
width: 1em;
transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);
}
&.back {
transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);
}
&.left {
width: 1em;
transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);
}
}
}

XHTML

<div class="perspective"> <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face roof"/> <div class="bar-face front"/> <div class="bar-face left"/> <div class="bar-face right"/> <div class="bar-face back"/> <div class="bar-face floor"/> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof"/>
<div class="bar-face front"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back"/>
<div class="bar-face floor"/>
</div>
</div>

图片 2

好的,这是一个很棒的立方体,但是我们要为进度条创建一个矩形。如果你还记得的话,我们已经用一种液体化的方法构建了面,所以如果我们只是增加.bar类的width,那么这样就可以。在这个例子中,我们使用了4em的宽度。

图片 3

            -webkit-transform: rotateX(-90deg) translateZ(50px);
            -moz-transform: rotateX(-90deg) translateZ(50px);
            -ms-transform: rotateX(-90deg) translateZ(50px);
            -o-transform: rotateX(-90deg) translateZ(50px);
            transform: rotateX(-90deg) translateZ(50px);
            -webkit-transition: all .6s;
            -moz-transition: all .6s;
            -ms-transition: all .6s;
            -o-transition: all .6s;
            transition: all .6s;
         }
       
        .information strong {
           display: block;
           margin: .2em 0 .5em 0;
           font-size: 20px;
           font-family: "Oleo Script";
          }
        .item:hover img {
         任务七、列表项悬浮状态时,去掉图片的阴影效果
            border-radius: 15px;
            box-shadow:none;
        }
       
        .item:hover .information {
            box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
            border-radius: 3px;
         }
 </style>
</head>
<body>
 <div id="container">
     <h1>CSS3 3D变形制作视频展示区</h1>
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>澳门风云</strong>闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,终回流澳门退休,更宴请各方朋友到来庆祝生日宴.
             </span>
         </div>
     </div>
     
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔,为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
             </span>
         </div>
     </div>
     
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中,新晋刑警•佐原夏辉(佐藤健饰)被分配到银座警察
             </span>
         </div>
     </div>
     
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
             </span>
         </div>
     </div>
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>红眼</strong>1988年7月16日,从汉城始发的列车发生了一起严重的交通事故,造成100多人死亡。
             </span>
         </div>
     </div>
     <div class="wrapper">
         <div class="item">
             <img src="" />
             <span class="information">
             <strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故,一段笑料十足的误打误撞,将两个外表相似却内容各异的箱子调换。
             </span>
         </div>
     </div>
 </div>
</body>
</html>

//搭建一个舞台
margin-top:200px;
margin-left:auto;
margin-right:auto;
width:300px;
height:300px;
perspective:1200px;
font-size:5em;
font-weight:bold;
color:#cc00ff;

构建百分比填充

百分比填充将包含在面内,并且,为了保持HTML代码的最小化,我们将使用伪类:before。这样生成的:before元素将显示相对于面宽度的百分比。

Sass

.bar { // -> The SCSS from before .bar-face { // -> The SCSS from before &.percentage:before { content: ''; display: block; position: absolute; bottom: 0; width: 0; height: 100%; margin: 0; background-color: rgba($magenta, .8); transition: width .6s ease-in-out; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
&.percentage:before {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 100%;
margin: 0;
background-color: rgba($magenta, .8);
transition: width .6s ease-in-out;
}
}
}

XHTML

<div class="perspective"> <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face roof percentage"/> <div class="bar-face front percentage"/> <div class="bar-face left"/> <div class="bar-face right"/> <div class="bar-face back percentage"/> <div class="bar-face floor percentage"/> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

图片 4

现在我们需要编写百分比填充样式。手动编写一百个类将会非常繁琐,所以让我们写一些可靠的循环来从HTML中获取aria-valuenow属性的所有值。

Sass

.bar { // -> The SCSS from before .bar-face { // -> The SCSS from before } <a href='; $i from 0 to 101 { &[aria-valuenow='#{$i}'] { .percentage:before { width: $i * 1%; } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
}
 
<a href='http://www.jobbole.com/members/lowkey2046'>@for</a> $i from 0 to 101 {
&[aria-valuenow='#{$i}'] {
.percentage:before {
                width: $i * 1%;
}
}
}
}

如果你想立竿见影地看到成果,那么只需将HTML中的aria-valuenow属性从0更改至100。

}
.cube{

构建皮肤

为了构建皮肤,我们将使用Sass mixins。为了得到一个现实化的外观,我们将使用box-shadow属性。这个属性支持一个数组的值,并且这个数组将允许我们模拟照明。我们将在这个属性中包含地面阴影和面的采光。

Sass

@mixin build-skin($color, $name) { &.#{$name} { .floor { box-shadow: 0 -0.2em 1em rgba(0,0,0,.15), 0 0.2em 0.1em -5px rgba(0,0,0,.3), 0 -0.75em 1.75em rgba($white,.6); } .left { background-color: rgba($color, .5); } .percentage:before { background-color: rgba($color, .5); box-shadow: 0 1.6em 3em rgba($color,.25); } } } .bar { // -> The SCSS from before <a href='; build-skin(#57caf4, 'cyan'); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@mixin build-skin($color, $name) {
&.#{$name} {
.floor {
box-shadow:
0 -0.2em 1em rgba(0,0,0,.15),
0 0.2em 0.1em -5px rgba(0,0,0,.3),
0 -0.75em 1.75em rgba($white,.6);
}
.left {
background-color: rgba($color, .5);
}
.percentage:before {
background-color: rgba($color, .5);
box-shadow: 0 1.6em 3em rgba($color,.25);
}
 
}
}
.bar {
// -> The SCSS from before
<a href='http://www.jobbole.com/members/include'>@include</a> build-skin(#57caf4, 'cyan');
}

XHTML

<div class="perspective"> <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face roof percentage"/> <div class="bar-face front percentage"/> <div class="bar-face left"/> <div class="bar-face right"/> <div class="bar-face back percentage"/> <div class="bar-face floor percentage"/> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

图片 5

此外,我们需要一个照亮面的技巧。如果我们以正确的顺序输入面的DOM节点,我们将看到奇迹:

XHTML

<div class="perspective"> <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face roof percentage"/> <div class="bar-face back percentage"/> <div class="bar-face floor percentage"/> <div class="bar-face left"/> <div class="bar-face right"/> <div class="bar-face front percentage"/> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face front percentage"/>
</div>
</div>

图片 6

这里发生了什么?很简单:当浏览器渲染一个绝对元素时,默认情况下它会添加一个自动递增的z-index(如果我们不编辑此属性的话)。所以,如果我们通过先放置底部的面来改变渲染顺序,那么它的阴影就会覆盖在背面的所有面上。这就是我们实现现实化阴影的原理。

关于如何实现进度条就都在这里了!现在,请查看所有DEMO演示和源代码文件,然后开始构建皮肤来训练自己此技能吧。

感谢各位的阅读,希望本教程能对你有所帮助!

1 赞 收藏 评论

图片 7

//cube是正方体
position:relative;
transform:rotateX(-45deg) rotateY(45deg);
transform-style:preserve-3d;
transition: all .6s;
}
.side{
color:blue;
text-align:center;
width:300px;
height:300px;
line-height:300px;
position:absolute;
background:#cc66ff;
opacity:0.5;
border:1px solid rgba(117,4,24,0.5);

}

//.front到.bottom是6个面分别进行旋转,构建出正方体的整形
.front{
transform:translateZ(150px);
}
.back{
transform:rotateY(180deg) translateZ(150px);
}
.left{
transform:rotateY(-90deg) translateZ(150px);
}
.right{
transform:rotateY(90deg) translateZ(150px);
}
.top{
transform:rotateX(90deg) translateZ(150px);
}
.bottom{
transform:rotatex(-90deg) translateZ(150px);
}
#stage:hover .cube{

//设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度
transform:rotateX(-45deg) rotateY(225deg);
transition:transform .6s;
}
</style>
</head>

//div部分

<body>
<div id="stage">
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2.jpg" alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>

</body>
</html>

本文由星彩网app下载发布于前端技术,转载请注明出处:shadow达成的各个能够阴影效果,3D旋转效果

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。