css3的阴影、透明和动画

angowang

浏览: 5138 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

阴影效果：

<!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>

分享到：

css的浮动 | css的居中

2014-09-17 22:42
浏览 413
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论