CSS3 盒模型之漸變與CSS3動畫

網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

在css、html中的標籤元素大致分爲三種不一樣的類型：塊狀元素、行內元素、和行內塊狀元素。

       經常使用的塊狀元素有（block）：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

       經常使用的行內元素有（inline）：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

       經常使用的行內塊狀元素有：<img>、<input>

特徵：

塊級元素 block：獨佔一行，能夠任意設置寬高

行內元素 inline：寬高不可轉換 

行內塊級元素 inline-block:同時具有塊級和行內元素的特色

• 改變無序列表

    /*序列去小圓點*/
    list-style: none;  //去掉小圓點
    list-style: upper-roman;    //在序列前增長羅馬數字 
    list-style:lower-roman;     //在序列前英文羅馬小寫
    list-style: upper-alpha;    //英文大寫A.B.C序列

• CSS盒子邊框

     盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色(邊框三個屬性)。

    /*盒子邊框樣式*/
    border-top: 2px solid red;    //實線
    border-right: 2px dashed yellow;   //虛線
    border-left: 2px dotted blue;    //點線
    border-bottom: 4px double green;  //雙實線
}

      border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如:border-color:#888;//前面的井號不要忘掉。

• 添加漸變元素    linear-gradient 線性傾斜（漸變色）

     在HTML中定義一個<div closs="box」>，經過內聯或者外聯的方式賦予其樣式

1.   製做一個背景爲紅色的圓：  border-radius
     

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    /*圓*/
    border-radius: 100px;  //半徑=直徑的一半的圓形,其餘圓形，能夠更改屬性值

     2.給盒模型元素添加陰影   box-shadow

.box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*盒模型元素陰影*/
            /* X Y 模糊 外延 顏色 */
            box-shadow:9px 5px 5px #000;
        }

      3.線性漸變色  ：顏色從上往下和從左往右   兩種方式漸變

 .box{
            width: 200px;
            height: 200px;/*線性漸變色，從上往下*/
            background: linear-gradient(red,yellow); //linear-gradient線性傾斜
        }

/*從左到右漸變 to right*/
            background: linear-gradient(to right,red,yellow);

   /*顏色位置轉變,90deg是黃變紅，-90deg是紅變黃*/
    background: linear-gradient(-90deg,green,red);

     4.徑向漸變（從中間擴散至周圍）   background: radial-gradient

background: radial-gradient(red 10px,yellow 15px);

 

• 當鼠標移入時，圖片轉變 ： transition

.box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }
        .box1:hover{
            background-color: aqua;
            transition: all linear 2s;     //all：所有  linear:勻速 2s：時間2秒
        }

        鼠標移入後：      

 

• CSS3動畫：從一個樣式逐漸變化爲另外一種樣式的效果。（能夠任意改變多的樣式和次數）
•  animation屬性   @Keyframesz規則

 @Keyframesz規則是建立動畫 逐步將從前的樣式更改成新的樣式

  在建立動畫時，把它綁定到一個選擇器，規定動畫的名稱、 時長，不然動畫不會有任何效果！

注：from to 等同於0%  100%（0%是動畫的開始，100%時動畫的完成）

 

.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50px;
 /*在box中添加屬性動畫元素*/
    animation: mypicter 2s 5;  //5是循環的次數 ，infinite無線循環 mypicter自定義名稱
}
/*動圖元素循環值，在box大括號外面設置*/

 /*從紅色 變成藍色*/  from-to是一個總體

 @keyframes mypicter { 

　　　from{ background-color: red; }
　　　 to{ background-color: blue; }}