1. 程式人生 > >CSS3和動畫

CSS3和動畫

chrom utf oct ddd 放大 img net 慢慢 inf

定位:

z-index疊層 數字越大越往上層

註意:要用z-index屬性必須設position屬性

溢出overflow

屬性值:visible 不剪切內容也不添加滾動條

Auto 在必需時對象內容才會被裁切或顯示滾動條

hidden 不顯示超過對象尺寸的內容

scroll 總是顯示滾動條,強制加滾動條

Overflow-x x軸方向溢出

overflow-y y軸方向溢出

縮放:

Zoom 放大、縮小

邊框:border

border-radius 圓角

實例:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"> 
    <title>菜鳥教程(runoob.com)</title> 
    <style> 
    div{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
    }
    </style>
  </head>
  <body>

    <div>border-radius 屬性允許您為元素添加圓角邊框! </div>

  </body>
</html>

 結果為:

 技術分享圖片

box-shadow 陰影

實例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鳥教程(runoob.com)</title> 
    <style> 
      div
    {
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
    }
    </style>
  </head>
  <body>

      <div></div>

    </body>
</html>    

結果為:

 技術分享圖片

border-image 圖片

border-image: source slice width outset repeat|initial|inherit;

border-image-source 用於指定要用於繪制邊框的圖像的位置

border-image-slice 圖像邊界向內偏移

border-image-width 圖像邊界的寬度

border-image-outset 用於指定在邊框外部繪制 border-image-area 的量

border-image-repeat 用於設置圖像邊界是否應重復(repeat)、拉伸(stretch)或鋪滿(round)。

實例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>菜鳥教程(runoob.com)</title> 
    <style> 
      div{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
    }

      #round
    {
	
	border-image:url(border.png) 30 30 round;
    }

      #stretch
    {
	
	border-image:url(border.png) 30 30 stretch;
    }
    </style>
  </head>
  <body>

    <p>
      <b>註意: </b>
      Internet Explorer 不支持 border-image 屬性。
    </p>     <p> border-image 屬性用於設置圖片的邊框。</p>     <div id="round">這裏,圖像平鋪(重復)來填充該區域。</div>     <br>     <div id="stretch">這裏,圖像被拉伸以填充該區域。</div>     <p>這是我們使用的圖片素材:</p>     <img src="/images/border.png" />   </body> </html>

結果為:

  技術分享圖片

背景:

background-size:指定背景大小

實例:

div{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

  

漸變:

線性漸變:從上到下:

實例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>菜鳥教程(runoob.com)</title> 
    <style>
    #grad1 {
        height: 200px;
    
        background: linear-gradient(red, blue); /* 標準的語法(必須放在最後) */
      }
    </style>
  </head>
  <body>

    <h3>線性漸變 - 從上到下</h3>
    <p>從頂部開始的線性漸變。起點是紅色,慢慢過渡到藍色:</p>

    <div id="grad1"></div>

    <p>
      <strong>註意:</strong>
      Internet Explorer 9 及之前的版本不支持漸變。
    </p>   </body> </html>

結果為:

技術分享圖片  

線性漸變從左到右

實例:

background: linear-gradient(to right, red , blue); /* 標準的語法 */

線性漸變對角

實例:

 

<style>
  #grad1 {
        height: 200px;
   
        background: linear-gradient(to bottom right, red , blue); /* 標準的語法(必須放在最後) */
    }
</style>

 結果為:

 技術分享圖片

 漸變使用角度:

實例:

#grad2 {
            height: 100px;
       
            background: linear-gradient(90deg, red, blue); /* 標準的語法(必須放在最後) */
    }
    

結果:

技術分享圖片  

使用多個顏色結點

實例:

#grad1 {
    height: 200px;
   
    background: linear-gradient(red, green, blue); /* 標準的語法(必須放在最後) */
}

結果為:

技術分享圖片  

2D轉換:

實例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>菜鳥教程(runoob.com)</title> 
  <style> 
    div{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(30deg);
	
  }
  </style>
</head>
<body>

  <div>Hello</div>

</body>
</html>

結果:

技術分享圖片  

過渡:transition

實例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>菜鳥教程(runoob.com)</title>
  <style> 
    div{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	
    }

   div:hover{
	width:300px;
    }
  </style>
</head>
<body>

  <p>
    <b>註意:</b>
    該實例無法在 Internet Explorer 9 及更早 IE 版本上工作。
  </p>      <div></div>   <p>鼠標移動到 div 元素上,查看過渡效果。</p> </body> </html>

動畫;

實例:

<html>
<head>
  <meta charset="utf-8"> 
  <title>菜鳥教程(runoob.com)</title> 
  <style> 
    div{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	
  }

    @keyframes myfirst{
	from {background:red;}
	to {background:yellow;}
  }


  </style>
</head>
<body>

  <p>
    <b>註意:</b>
    該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
  </p>   <div></div> </body> </html>

 當動畫為 25% 及 50% 時改變背景色,然後當動畫 100% 完成時再次改變:

例如:

  

<!DOCTYPE html>

<html>

  <head> 

   <meta charset="utf-8">

  <title>菜鳥教程(runoob.com)</title> 
  <style> 
    div{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	
  }

    @keyframes myfirst{
	0%   {
        background:red;
    } 25% {
        background:yellow;
    } 50% {
        background:blue;
    } 100% {
        background:green;
    }    }   </style> </head> <body>   <div></div>   <p>
    <b>註釋:</b>
    當動畫完成時,會變回初始的樣式。
  </p>   <p>

    <b>註意:</b>
    該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
  </p> </body> </html>

 動畫屬性:

 技術分享圖片

實例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <title>菜鳥教程(runoob.com)</title>
  <style> 
    div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	
  }

    @keyframes myfirst{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}


  </style>
</head>
<body>

  <p>
    <b>註意:</b>
     該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
  </p>   <div></div> </body> </html>

  

CSS3和動畫