实现CSS3 的部分效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>实现CSS3 的部分效果</title>
    <style type="text/css">
        #radius{
            width:300px;
            height:100px;
            line-height:100px;
            text-align:center;
            font-size:20px;
            border:1px solid #0FF;
            /*圆角 FF C O IE9*/
            border-radius:20px 20px 0 0;
            /*文字阴影 FF C O */
            text-shadow:1px 1px 1px red,-1px -1px 1px blue;
            /*块阴影 FF C O IE9*/
            box-shadow:2px 2px 10px green;
            /*可改变大小  FF C*/
            resize:both;
            overflow:auto;
        }
        #radius p{
            text-align:center;
            /*文字超出部分用...代替 FF C*/
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            /*文字超出部分用...代替*/
        }
        #radius h1{
            margin:0 auto;
            width:200px;
            height:100px;
            /*线性渐变 FF C O*/
            background:-moz-linear-gradient(top,#0FF,#00F);
            background:-o-linear-gradient(top,#0FF,#00F);
            background:-webkit-linear-gradient(top,#0FF,#00F);
        }
        #radius h1:hover{
            /*转换 scale(缩放) rotate(旋转) translate(平移) skew(扭曲) FF C O */
            -moz-transform:scale(1.2) rotate(-10deg) translate(10px,10px) skew(10deg,50deg);
            -webkit-transform:scale(1.2) rotate(-10deg) translate(10px,10px) skew(10deg,50deg);
            -o-transform:scale(1.2) rotate(-10deg) translate(10px,10px) skew(10deg,50deg);
        }
        /*过渡  FF C O IE9(支持一般)*/
        #radius h2{
            transition:color .5s ease-in,opacity 1s ease-in 0.2s;
        }
        #radius h2:hover{
            color:#F00;
            opacity:0.6;
        }
        /*过渡*/
    </style>
</head>
<body>
    <div id="radius">
        <p>时人莫晓池中水，浅出无妨有卧龙。</p>
        <h1>&nbsp;</h1>
        <h2>海到天边天作岸，山登绝顶我为峰！</h2>
    </div>
</body>
</html>

posted on 2014-01-13 16:02  liangshanbo  阅读(144)  评论(0)    收藏  举报

导航