CSS3效果样式 | CSS3

1.过渡效果 transitions

给原有css样式添加展示效果，以及展示间隔时间：(-webkit-transition-)

　　property指定color等属性，duration指定时间间隔，timing指定展示效果；

下面的示例，展示一个盒子border颜色随鼠标获取焦点失去焦点间的变化，再添加css3效果；

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    div {
        width: 300px;
        border: 25px solid;
        padding: 25px;
        margin: 25px;
    }  
    /* 1.CSS鼠标悬停 */

    div {
        color: #e83119;
    }

    div:hover {
        color: #0a99ae;
    }
    /* 2.CSS过度效果transitions */

    div {
        -webkit-transition-property: color;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing: ease-out;
    }
    </style>
    <div></div>
</body>

</html>

2.背景剪裁 background-clip

使用背景颜色作为文字的颜色！

原理：将背景图片贴在文字后面，将文字层设置为透明(-webkit-text-fill-color: transparent)，再对有文字的地方进行剪裁(-webkit-background-clip: text)；

下面的示例还包含文字旋转的功能(transform);

注意：firefox，opera等浏览器暂不支持background-clip的使用；

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    .bg-clip {
        background: url(./4.jpg) repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* 配合transform属性实现文字按一定角度旋转 */
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }
    </style>
    <div class="bg-clip">
        <h1>hello world!</h1>
    </div>
</body>

</html>

3.盒阴影(及RGBa)，CSS转换角度

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
        .boxes{
            width:1400px;
            height: 800px;
        }
        /*
        1.RGBa阴影
            box-shadow：
            参数1，2表示x，y轴坐标偏移；
            参数3表示阴影模糊度；
            rgba：表示RGB颜色以及alpha不透明度(0.5表示50%)；
        */
        .shadowed{
            border:3px solid #fff;
            -o-box-shadow:0 3px 4px rgba(0,0,0,.5);
            -moz-box-shadow:0 3px 4px rgba(0,0,0,.5);
            -webkit-box-shadow:0 3px 4px rgba(0,0,0,.5);
            box-shadow:0 3px 4px rgba(0,0,0,.5);
        }
        /*2.旋转图片*/
        .smash1{
            margin-bottom:-125px;
            -o-transform: rotate(2.5deg);  /* degree表示角度 */
            -moz-transform: rotate(2.5deg);
            -webkit-transform: rotate(2.5deg);
        }
        .smash2{
            -o-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -webkit-transform: rotate(-7deg);
        }
        .smash3{
            -o-transform: rotate(2.5deg);
            -moz-transform: rotate(2.5deg);
            -webkit-transform: rotate(2.5deg);
        }
        .smash4{
            margin-bottom:-40px;
            -o-transform: rotate(-2.5deg);
            -moz-transform: rotate(-2.5deg);
            -webkit-transform: rotate(-2.5deg);
        }
    </style>
    <div class="boxes">
        <img class="smash1 shadowed" src="./a1.jpg">
        <img class="smash2 shadowed" src="./a2.jpg">
        <img class="smash3 shadowed" src="./a3.jpg">
        <img class="smash4 shadowed" src="./a4.jpg">
    </div>
</body>

</html>

4.CSS动画 animations

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    .circle_motion {
        -webkit-animation-name: track;
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes track{
        0%{
            margin-top:0px;
        }
        25%{
            margin-top:150px;
        }
        50%{
            margin-top:0px;
        }
        75%{
            margin-top:300px;
        }
        100%{
            margin-top:0px;
        }
    }
    </style>
    <div class="circle_motion">
        <img src="./a1.jpg" alt="">
    </div>
</body>

</html>