itsPG.org

PG @ NCTU SenseLab

[筆記] CSS3圓角 & CSS3動畫

這篇文章筆記一下CSS3的圓角跟CSS3動畫的語法，順便推薦一個很好用的CSS按鈕產生工具

CSS按鈕產生工具

Ultimate CSS Gradient Generator 拿來處理CSS的漸層再方便不過了

CSS3 圓角

在Chrome, Safari下：

統一設定：

-webkit-border-radius:10px;

分開設定：

-webkit-border-top-left-radius:15px; 
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;

在Firefox下：

統一設定：

-moz-border-radius:10px;

分開設定：

-moz-border-top-left-radius:15px;
-moz-border-top-right-radius:15px;
-moz-border-bottom-right-radius:10px;
-moz-border-bottom-left-radius:10px;

CSS3 淡出動畫

參考資料：w3schools.com 懶人包1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  #navbar-iframe:hover{
      -moz-opacity: 1.0; /* Other */
      opacity: 1.0; /* Safari, Chrome and Firefox */
      -moz-animation: navbar 1s; /* Firefox */
      -webkit-animation: navbar 1s; /* Safari and Chrome */
  }
  @-moz-keyframes navbar { /* Firefox */
      from {opacity: 0.0}
      to {opacity: 1.0}
  }
  @-webkit-keyframes navbar { /* Safari and Chrome */
      from {opacity: 0.0}
      to {opacity: 1.0}
  }

懶人包2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

   css test
  div
  {
      width:100px;
      height:100px;
      background:red;
      position:relative;
      animation:myfirst 5s;
      -moz-animation:myfirst 5s; /* Firefox */
      -webkit-animation:myfirst 5s; /* 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;}
  }

  @-moz-keyframes myfirst /* Firefox */
  {
      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;}
  }

  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
      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;}
  }

Comments