你不知道的css3(上） -- 用css3爲你的組件添加風景

寫在前面:如今不少前端文章其實都是在講js以及一些js框架的東西，但其實css3中有許多好玩的東西，能夠爲你的一些css組件添加一些亮色，這篇文章介紹了幾個比較好玩的效果，但願有個拋磚引玉的效果

一.3D風景動態骰子

在線演示

一、css3D、動畫基礎知識預備

二、建立一個3D場景 先放置一個.box的div父容器，在box裏放置一個.dice的div，而後在其裏面放置6個div，分別表示骰子的6個面。

<div class="box">
 <div class="dice">
   <div class="surface front ">anyway style(text or img)</div>
     <div class="surface left">anyway style(text or img)</div>
     <div class="surface right">anyway style(text or img)</div>
     <div class="surface bottom">anyway style(text or img)</div>
     <div class="surface top">anyway style(text or img)</div>
     <div class="surface back">anyway style(text or img)</div>		
   </div>
</div>
複製代碼

二、設置CSS樣式

.dice {
	width:200px;
	height:200px;
	position:relative;
	margin:100px auto;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}
複製代碼

transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素，默認是其子元素不呈現3D效果，因此咱們須要添加preserve-3d值，讓其子元素保留其 3D 效果。 接下來，咱們製做立方體的每個面：

.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #666;
    opacity: 0.8;
    font-size: 60px;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.face img {
    width: 100%;
    height: 100%;
}

.front {
    transform: rotateY(0) translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.right {
    transform: rotateY(90deg) translateZ(100px);
}

.top {
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    transform: rotateX(90deg) translateZ(-100px);
}
複製代碼

在上面的代碼中，咱們使用transform的rotate()和translateZ()來轉換每一面，平移都是寬度的一半。 要注意rotate()和translateZ()的順序，順序不一樣，轉換的結果也會不同，好比左側.left這一面，在這裏，咱們是先繞着Y軸順時針旋轉90，而後再在Z軸的正方向平移150，若是你先平移後旋轉，結果就不同了，你能夠試試。 最後，咱們還給div.cude加上動畫：

@-webkit-keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
複製代碼

二.圖片倒影效果

一、box-reflect(方法一)

（1）使用box-reflect屬性最容易實現圖片倒影效果。

box-reflect屬性介紹： box-reflect：<direction> <offset>? <mask-box-image>?

參數說明：

：表示倒影的方向，可能值：above、below、left、right（上下左右）； ：表示倒影與元素之間的間隔； ：表示遮罩圖像，可爲url地址、漸變

（2） 具體代碼

只需簡單的放置一張圖片：

![](images/example.jpg)

（3）設置樣式

直接使用box-reflect方法：

img {
   -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 20%, rgba(250, 250, 250, .3));
}
複製代碼

在這個方法中，使用漸變來充當遮罩圖像，效果以下圖所示：

給box-reflec設置url屬性能夠用另外一張圖片來自定義倒影效果：

img {
   -webkit-box-reflect: below 0 url(images/star.png);
}
複製代碼

注意：因爲box-reflect方法目前只有webkit引擎的瀏覽器才支持，因此考慮兼容性可使用下面介紹的第二種方法

二、僞元素方法(方法二)

（1） 僞元素方法本質上是複製圖片，結合 transform的用法而後翻轉，最後同樣是使用漸變來充當遮罩層，覆蓋在翻轉的圖片之上。

（2） 具體代碼

與第一種方式略有不一樣，這裏用一個div包裹住圖片：

<div class="box-reflect">
	![](images/example.jpg)
</div>
複製代碼

（3）設置樣式

先將圖片克隆一份，而後翻轉過來：

.box-reflect {
    position: relative;
  width: 150px;
    float: left;
    margin-right: 40px;
}
.box-reflect img {
    width: 100%;
    height: 100%;
}
.box-reflect:before {
    background: url(images/example.jpg) no-repeat;
    background-size: 100% 100%;
    transform: scaleY(-1);
    /*設置半透明加強倒影效果*/
    opacity: 0.5;
    /*IE下設置透明*/。
    filter: alpha(opacity='50');
}
.box-reflect:before, .box-reflect:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    content: "";
}
複製代碼

注意：這裏的transform:scaleY(-1)的做用與transform:rotateX(-180deg)等同，可聯想一下transform:scaleX(-1)的效果

而後，添加一層漸變，讓其覆蓋在倒影的上面,漸變的值可根據實際效果調整：

.box-reflect:after {
    background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
    background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
    background-image: -webkit-linear-gradient(bottom,rgb(0,0,0) 20%,rgba(0,0,0,0) 90%);
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
複製代碼

三.心跳效果

1.首先用css畫出一個靜態的紅心

#heart {
   position: relative;
   width: 100px;
   height: 90px;
}
#heart:before,
#heart:after {
   position: absolute;
   content: "";
   left: 50px;
   top: 0;
   width: 50px;
   height: 80px;
   background: red;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
       -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
           transform-origin: 0 100%;
}
#heart:after {
   left: 0;
   -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
           transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
      -moz-transform-origin: 100% 100%;
       -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
           transform-origin :100% 100%;
}
複製代碼

最後給這個紅心增長動畫便可

.heartbeat {
    -webkit-animation-name: heartbeat;
	-webkit-animation-duration: 0.83s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@keyframes heartbeat {
	from {
	    opacity:0.1;
    }
    50% {
	    opacity:1;
    }
    to {
	    opacity:0.1;
    }
}
複製代碼

四.3D按鈕

1.建立div

放置一個要設置成3D按鈕的元素，這裏使用a標籤：

<a href="#" class="3dButton">3dButton</a>

2. 設置CSS樣式

3D效果主要是依靠陰影（box-shadow）和新的顏色屬性HSL來實現。 （1）box-shadow: h-shadow v-shadow blur spread color inset

h-shadow：必需。水平陰影的位置。容許負值。 v-shadow：必需。垂直陰影的位置。容許負值。 blur：可選。模糊距離。 spread：可選。陰影的尺寸。 color：可選。陰影的顏色。請參閱 CSS 顏色值。 inset：可選。將外部陰影 (outset) 改成內部陰影。

（2）HSL(H,S,L)。HSL色彩模式是工業界的一種顏色標準，HSL便是表明色調，飽和度，亮度三個通道的顏色，這個標準幾乎包括了人類視力所能感知的全部顏色，是目前運用最廣的顏色系統之一。

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其餘數值來指定顏色。取值爲：0 - 360 S：Saturation(飽和度)。取值爲：0.0% - 100.0% L：Lightness(亮度)。取值爲：0.0% - 100.0%

瞭解完基礎知識後，下面就來看看3D按鈕效果怎麼實現。

box-shadow: 
    inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, 
    inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, 
    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, 
	rgba(0, 0, 0, 0.2) 0 .5em 5px;
複製代碼

如上代碼所示，這裏使用了5層陰影，1和2層是內陰影，這是爲了實現上下兩邊光滑效果，你也能夠去除這兩個；第5層只是普通的陰影；第3層是爲了更真實，無關緊要；關鍵是第4層，實現相似於border的實投影。

爲了更完美來按鈕實現點擊效果，這裏主要是想讓實陰影消失：

.button:active {
	box-shadow: inset rgba(255, 255, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.2) 0 -0.1em .3em, 
	rgba(0, 0, 0, 0.4) 0 .1em 1px, 
	rgba(0, 0, 0, 0.2) 0 .2em 6px;
	transform: translateY(.2em);
}
複製代碼

最後來個示例中按鈕的風形形狀效果，只有瞭解下border-radius的高級用法就能夠了： border-radius: 1em 5em/5em 1em;

/的先後分別指的是水平半徑和垂直半徑。

五.漸變炫彩邊框

一、html代碼

<div class="gradient-border gradient-border-more">
  <span></span>
  ![](images/eg.jpg)
</div>
複製代碼

注意這裏的span標籤是這個效果的重點和技巧所在。

二、設置CSS樣式

咱們經過gradient-border和span的:before和:after僞元素來實現漸變邊框。

.gradient-border {
	position:relative;
	width:200px;
	height:200px;
	background:gray;
}
.gradient-border:before,
.gradient-border:after,
.gradient-border span:first-child:before,
.gradient-border span:first-child:after {
	content:"";
	position:absolute;
	background:red;
	-webkit-transition:all .2s ease;
	transition:all .2s ease;
}
/*上邊邊框*/
.gradient-border:before {
	width:0;  // 初始寬度
	top:-2px;
	right:0;
	height:2px;
}
/*右邊邊框*/
.gradient-border:after {
	width:2px;
	height:0;  // 初始高度
	right:-2px;
	bottom:0;
}
/*下邊邊框*/
.gradient-border span:first-child:before {
	width:0;  // 初始寬度
	height:2px;
	bottom:-2px;
	left:0;
}
/*左邊邊框*/
.gradient-border span:first-child:after {
	width:2px;
	height:0;  // 初始高度
	top:0;
	left:-2px;
}
複製代碼

這這個地方使用了.gradient-border裏的:before和:after，以及span裏的:before和:after製做了邊框。

三、增長鼠標hover動畫

鼠標移動上去的動畫，原理是經過就是改變邊框的寬高。

.gradient-border:hover:before,
.gradient-border:hover span:first-child:before {
	width:calc(100% + 2px);
}
.gradient-border:hover:after,
.gradient-border:hover span:first-child:after {
	height:calc(100% + 2px);
}
複製代碼

/*添加過渡延遲時間*/
.gradient-border-more:hover:before,
.gradient-border-more:hover span:first-child:before {
	-webkit-transition-delay:.2s;
	transition-delay:.2s;
}
複製代碼