over 6 years ago

這篇文章筆記一下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:

#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:

   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;}
    }
← [教學] 在windows上安裝octopress 新手教學 / 初學者指南 [開箱] TF10開箱 + 閒聊 →