css3 @ 互聯網 - 大數據

文章出處

css3邊框：

border-radius：屬性，添加像素，可以使邊框角變圓，50px的邊框為半圓形，50%則會變成一個橢圓形。

box-shadow: 屬性，添加像素，顏色，例；

出現的形狀如圖所示,代表距離左30px，距離下0px,顏色則是黃色

出現的形狀如圖所示，代表距離左0px;距離下30px;顏色則是灰色

在后面再加一個10px,則陰影部分會虛化，也就是會模糊

再在后面加個inset,則陰影部分和藍色部分進行了顏色交換，并且只顯示里面的部分，inset是設置在里面的意思

border-imager屬性，可以允許使用圖片作為邊框，但border-imager屬性在IE和QQ瀏覽器中并不兼容。

Css背景：

background-size屬性，可以規定背景圖片的尺寸

background-origin屬性，規定根據邊框定位還是文本定位；

background-origin:border-box;根據邊框定位

background-origin:content-box;根據文本定位

多重背景圖片，background-imager

兩張背景圖重疊，第一張為優先級

如果不加background-repeat,則兩個背景圖會鋪滿整個屏幕

給文字加陰影：

text-shadow屬性，可以向文本應用陰影效果

四個值，分別代表距離左側，距離上側，模糊程度及陰影顏色

效果如圖所示。

文本自動換行：word-wrap屬性，允許文本強制文本進行換行，這意味著會對單詞進行拆分，它的值是break-word允許對單詞進行拆分換到下一行

CSS3 轉換：

可以對元素進行移動、縮放、移動、拉長或拉伸。

可以使用2D或3D轉換來轉換我們的元素

2D轉換：

transform屬性，內置方法

1、rotate()進行旋轉，括號內部寫旋轉角度，默認順時針旋轉，允許負值，元素將進行逆時針旋轉。

如圖所示，里面的文字也會跟著一起旋轉，deg是度的意思

2、translate()從當前位置進行移動，括號內為x、y值，允許負值，將反方向移動

如圖所示，移動位置不光可以用定位移動，還可以xy軸移動

3、scale()改變原始尺寸，按照倍數變化，括號內為widch、height的倍數

如圖所示，改變元素的倍數，里面的文字也隨之改變

4、skew()水平、垂直方向進行扭轉，括號內是水平扭轉角度、垂直扭轉角度

<div style=" width:100px; height:100px; transform:skew(0deg,30deg); margin:50px ">縱向扭轉30度</div>
<div style="width:100px; height:100px; transform:skew(30deg,0deg); margin:100px">橫向扭轉30度</div>
<div style="width:100px; height:100px; transform:skew(30deg,30deg); margin:100px">橫向縱向都扭轉30度</div>

如圖所示，里面的文字也會隨之變化

3D轉換：

transform屬性，變形、轉換，內置方法：

1、rotateX(),沿水平x軸進行垂直的翻轉，括號內寫轉動度數

2、rotateY(),沿垂直Y軸進行水平的翻轉，括號內寫轉動度數

2D轉換和3D轉換的區別：2D轉換僅僅在于平面，文字可以看出并沒有反過來

3D轉換是相當于鏡面效果的，進行了前后空間（涉及到了Z軸）的占用進行的翻轉

如圖所示，3D翻轉，像鏡面一樣，字也是反的

CSS3過渡：transition屬性，專門應對顏色、長度、寬度、位置等變化過渡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
#a1
{ width:200px; height:100px; background-color:#909; border:1px solid #000}
#a2
{ width:200px; height:100px; background-color:#909;border:1px solid #000; transition:2s}
#a1:hover{ background-color:#969}
#a2:hover{ background-color:#99C}
#bg
{ width:200px; height:200px; border:1px solid #000; position:relative; left:400px}
#tb
{ position:relative; left:0px; top:0px; transition:1s}
#tb:hover{ left:-200px}
#tb:active{ left:-400px}
#c1
{ width:200px; height:200px; background-color:#09F; transition:1s}
#c1:hover{ width:300px; height:400px}
</style>
<body>
    <div id="a1">這是快速變得</div>
    <div id="a2">使用過渡的</div>
<br />
<br />
<div id="bg">
<table id="tb" width="600" height="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
    <td><img src="201291893228996.jpg"  width="200" height="200" /></td>
    <td><img src="1655299809.jpg"  width="200" height="200" /></td>
    <td><img src="20130109080830267.jpg"  width="200" height="200" /></td>

</tr>
</tbody>
</table>
<div>
<br /><br />
<div id="c1" ></div>
</body>
</html>

代碼如上，圖片如下：

CSS3動畫：

通過CSS3，我們能夠創建動畫，這樣可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript動畫。

想要創建CSS3動畫，需要遵循@keyframes規則。

@keyframes規則用于創建動畫。在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

注：IE需要10及以上。

創建好動畫之后需要綁定到某個選擇器，否則不會產生任何動畫效果。

使用animation進行動畫捆綁。兩個值：動畫名稱、時長。

時間長度必須規定，否則默認為0。也就是表示沒有動畫效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
from{ background-color:#C0C}
to{ background-color:#C9F}

}
</style>
<body>

<div id="c2"></div>
</body>
</html>

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

可以改變任意多的樣式以及任意多的次數。

我們一般情況下使用0%~100%來規定動畫發生的時機。或者使用關鍵詞from...to...，效果等同于0%~100%。

0%是動畫的開始，100%是動畫的完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
0%{ background:#F00}
15%{ background:#F90}
25%{ background:#FF0}
35%{ background:#3F6}
55%{ background:#6FF}
65%{ background:#63F}
100%{ background:#C00}
}
</style>
<body>

<div id="c2"></div>
</body>
</html>

多項改變時只需要在每個百分號后的花括號內寫上就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要進行位置改變，所以增加了position屬性*/
    animation:myfirst 5s infinite alternate;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行，交替執行*/
}
@keyframes myfirst
{/*改變位置和背景顏色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景顏色以及定位、陰影效果三個樣式。<br />
由于本動畫在捆綁選擇器時添加了一個infinite值，那么本動畫將無限執行下去。<br />
在無限執行的基礎之上增加了一個alternate值，那么本動畫會進行正反交替執行。
<div></div>
</body>
</html>