CSS Clip剪切元素实例

一、实例1：

.fixed {
    position: fixed;
    width: 382px;
    height: 100px;
    background: red;
    border: 1px solid blue;
    left:100px;
    top:100px;
}

    .fixed img {
        position: absolute;
        animation: face 4s ease infinite alternate;
        -webkit-animation: face 4s ease infinite alternate;
        clip: rect(0px,129px,100px,0px);
               
    }
@keyframes face {
    from {
        clip: rect(0px,129px,100px,0px);
    }
    to{
            clip: rect(0px,382px,100px,258px);
    }
}

二、实例2：

.fixed {
    position: fixed;
    width: 382px;
    height: 100px;
    background: red;
    border: 1px solid blue;
    left:100px;
    top:100px;
}

    .fixed img {
        position: absolute;
    }

.face1 {
    clip: rect(0px,129px,100px,0px);
}

.face2 {
    clip: rect(0px,258px,100px,129px);
}

.face3 {
    clip: rect(0px,382px,100px,258px);
}

    <div class="fixed">
        <img class="face3" src="../Img/clip-rect-10.png" />
    </div>
    <script>
        var number = 0;
        var img = document.getElementsByTagName('img')[0];
        setInterval(function () {
            number++;
            if (number == 4)
                number = 1;
            img.className = 'face' + number;
        }, 1000);
    </script>

三、实例3：

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
    border: 0px solid blue;
    left: 100px;
    top: 100px;
    animation:animateOne linear 4s infinite;
}
@keyframes animateOne {
    0%,100% {
        clip: rect(0px,100px,5px,0px);
    }

    25% {
        clip: rect(0px,5px,100px,0px);
    }

    50% {
        clip: rect(95px,100px,100px,0px);
    }

    75% {
        clip: rect(0px,100px,100px,95px);
    }
}

四、实例4：

        .fixed {
            position: fixed;
            width: 90px;
            height: 90px;
            background: red;
            border: 0px solid blue;
            left: 100px;
            top: 100px;
        }
            .fixed:before {
                position: absolute;
                width: 100px;
                height: 100px;
                margin:-5px;
                box-shadow:inset 0px 0px 2px 2px blue;
                content:'';
                animation: animateOne linear 4s infinite;
            }
        @keyframes animateOne {
            0%,100% {
                clip: rect(0px,100px,5px,0px);
            }

            25% {
                clip: rect(0px,5px,100px,0px);
            }

            50% {
                clip: rect(95px,100px,100px,0px);
            }

            75% {
                clip: rect(0px,100px,100px,95px);
            }
        }

Clip属性简介：http://www.cnblogs.com/tianma3798/p/5862126.html

转载于:https://www.cnblogs.com/tianma3798/p/5862162.html