你不知道的css3(上） -- 用css3為你的元件新增風景
寫在前面:現在很多前端文章其實都是在講js以及一些js框架的東西，但其實css3中有許多好玩的東西，可以為你的一些css元件新增一些亮色，這篇文章介紹了幾個比較好玩的效果，希望有個拋磚引玉的效果
一.3D風景動態骰子
Line"/>
ofollow,noindex">線上演示
1、css3D、動畫基礎知識預備
2、建立一個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> 複製程式碼
2、設定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);
}
}
複製程式碼
二.圖片倒影效果
1、box-reflect(方法一)
（1）使用box-reflect屬性最容易實現圖片倒影效果。
box-reflect屬性介紹： box-reflect：<direction> <offset>? <mask-box-image>?
引數說明：
：表示倒影的方向，可能值：above、below、left、right（上下左右）； ：表示倒影與元素之間的間隔； ：表示遮罩影象，可為url地址、漸變
（2） 具體程式碼
只需簡單的放置一張圖片：
（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引擎的瀏覽器才支援，所以考慮相容性可以使用下面介紹的第二種方法
2、偽元素方法(方法二)
（1） 偽元素方法本質上是複製圖片，結合 transform的用法然後翻轉，最後一樣是使用漸變來充當遮罩層，覆蓋在翻轉的圖片之上。
（2） 具體程式碼
與第一種方式略有不同，這裡用一個div包裹住圖片：
<div class="box-reflect">  </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>
- 設定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;
/的前後分別指的是水平半徑和垂直半徑。
五.漸變炫彩邊框
1、html程式碼
<div class="gradient-border gradient-border-more"> <span></span>  </div> 複製程式碼
注意這裡的span標籤是這個效果的重點和技巧所在。
2、設定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製作了邊框。
3、增加滑鼠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;
}
複製程式碼