css3的阴影、透明和动画

zuncle 2014-09-17

阴影效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: pink;
                //box-shadow:默认外阴影或inset内阴影,水平偏移,垂直偏移,模糊半径,扩展半径;
                box-shadow:3px 3px 15px 3px gray;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

透明效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 410px;
                height: 410px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: pink;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

动画效果:

 1.transition

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 500px;
                height: 500px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: pink;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                transition: 1s width ease, 1s 1s height ease;
            }
            .boxInside:hover {
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

2.animation

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 500px;
                height: 500px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: #c00;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
               
            }
            .boxInside:hover {
                -webkit-animation: 1s 1s rainbow 3;
                animation: 1s 1s rainbow 3;
            }
            @-webkit-keyframes rainbow {
                0%{background: #c00;}
                50%{background: orange;}
                100%{background: yellowgreen;}
            }
            @keyframes rainbow {
                0%{background: #c00;}
                50%{background: orange;}
                100%{background: yellowgreen;}
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

相关推荐