CSS3の新特性

CSS3の新特性

常用属性

不同浏览器对应不同前缀，Chrome（-webkit-），IE（-ms-），Firefox（-moz-）
transform：变形

<style type="text/css">
div {
    transform: rotate(10deg); /*变形*/
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}
</style>

border-radius：圆角

<style type="text/css">
div {
    border-radius: 10px; /*圆角半径*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
</style>

box-shadow：盒阴影，rgba最后一个值表示透明度

<style type="text/css">
div {
    box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2); /*盒阴影*/
    -webkit-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);
}
</style>

background：设置背景色渐变

<style type="text/css">
div {
    background: linear-gradient(to bottom right, orange, yellow); /*背景色渐变*/
    background: -webkit-linear-gradient(to bottom right, orange, yellow);
    background: -moz-linear-gradient(to bottom right, orange, yellow);
    background: -o-linear-gradient(to bottom right, orange, yellow);
}
</style>

@keyframes：动画声明

/*动画*/
<style type="text/css">
    @keyframes action-movie {
      0% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
      25% {
          background: linear-gradient(to bottom right, orange, yellow);
          background: -webkit-linear-gradient(to bottom right, orange, yellow);
          background: -moz-linear-gradient(to bottom right, orange, yellow);
          background: -o-linear-gradient(to bottom right, orange, yellow);
      }
      50% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
      75% {
          background: linear-gradient(to bottom right, orange, yellow);
          background: -webkit-linear-gradient(to bottom right, orange, yellow);
          background: -moz-linear-gradient(to bottom right, orange, yellow);
          background: -o-linear-gradient(to bottom right, orange, yellow);
      }
      100% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
    }

    @-moz-keyframes action-movie {
      0% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
      25% {
          background: linear-gradient(to bottom right, orange, yellow);
          background: -webkit-linear-gradient(to bottom right, orange, yellow);
          background: -moz-linear-gradient(to bottom right, orange, yellow);
          background: -o-linear-gradient(to bottom right, orange, yellow);
      }
      50% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
      75% {
          background: linear-gradient(to bottom right, orange, yellow);
          background: -webkit-linear-gradient(to bottom right, orange, yellow);
          background: -moz-linear-gradient(to bottom right, orange, yellow);
          background: -o-linear-gradient(to bottom right, orange, yellow);
      }
      100% {
          background: linear-gradient(to bottom right, yellow, orange);
          background: -webkit-linear-gradient(to bottom right, yellow, orange);
          background: -moz-linear-gradient(to bottom right, yellow, orange);
          background: -o-linear-gradient(to bottom right, yellow, orange);
      }
    }
</style>

完整实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <noscript>Your browser does not support JavaScript pluin</noscript>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        #information {
            width:150px;
            height: 150px;
            margin:15px auto;

            transform: rotate(10deg); /*变形*/
            -ms-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);

            border-radius: 10px; /*圆角半径*/
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;

            box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2); /*盒阴影*/
            -webkit-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);

            background: linear-gradient(to bottom right, orange, yellow); /*背景色渐变*/
            background: -webkit-linear-gradient(to bottom right, orange, yellow);
            background: -moz-linear-gradient(to bottom right, orange, yellow);
            background: -o-linear-gradient(to bottom right, orange, yellow);
        }

        /*动画*/
        @keyframes action-movie {
            0% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
            25% {
                background: linear-gradient(to bottom right, orange, yellow);
                background: -webkit-linear-gradient(to bottom right, orange, yellow);
                background: -moz-linear-gradient(to bottom right, orange, yellow);
                background: -o-linear-gradient(to bottom right, orange, yellow);
            }
            50% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
            75% {
                background: linear-gradient(to bottom right, orange, yellow);
                background: -webkit-linear-gradient(to bottom right, orange, yellow);
                background: -moz-linear-gradient(to bottom right, orange, yellow);
                background: -o-linear-gradient(to bottom right, orange, yellow);
            }
            100% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
        }

        @-moz-keyframes action-movie {
            0% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
            25% {
                background: linear-gradient(to bottom right, orange, yellow);
                background: -webkit-linear-gradient(to bottom right, orange, yellow);
                background: -moz-linear-gradient(to bottom right, orange, yellow);
                background: -o-linear-gradient(to bottom right, orange, yellow);
            }
            50% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
            75% {
                background: linear-gradient(to bottom right, orange, yellow);
                background: -webkit-linear-gradient(to bottom right, orange, yellow);
                background: -moz-linear-gradient(to bottom right, orange, yellow);
                background: -o-linear-gradient(to bottom right, orange, yellow);
            }
            100% {
                background: linear-gradient(to bottom right, yellow, orange);
                background: -webkit-linear-gradient(to bottom right, yellow, orange);
                background: -moz-linear-gradient(to bottom right, yellow, orange);
                background: -o-linear-gradient(to bottom right, yellow, orange);
            }
        }

        div #information:hover {
            -webkit-animation: action-movie 5s;
            -o-animation: action-movie 5s;
            -moz-animation: action-movie 5s;
            animation: action-movie 5s;
        }

        #operate {
            text-align: center;
            display: none;
        }

        #word {
            font-size: xx-large;
            text-shadow: 5px 10px 16px rgba(0, 0, 0, 0.3);
         }
    </style>
</head>
<body>
    <div id="status">
        <div id="information"></div>
        <div id="detail">
            <span id="word">Successfully.</span>
        </div>
    </div>

    <div id="operate">
        <button type="button" onclick="">click</button>
    </div>
</body>
</html>

联系我