css实现文字裁切效果 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        @keyframes tit-ani-1 {
            0% {
                clip: rect(7px, 820px, 39px, 0); }
            5.8823529412% {
                clip: rect(40px, 820px, 9px, 0); }
            11.7647058824% {
                clip: rect(105px, 820px, 37px, 0); }
            17.6470588235% {
                clip: rect(53px, 820px, 17px, 0); }
            23.5294117647% {
                clip: rect(57px, 820px, 29px, 0); }
            29.4117647059% {
                clip: rect(47px, 820px, 21px, 0); }
            35.2941176471% {
                clip: rect(45px, 820px, 39px, 0); }
            41.1764705882% {
                clip: rect(4px, 820px, 21px, 0); }
            47.0588235294% {
                clip: rect(6px, 820px, 63px, 0); }
            52.9411764706% {
                clip: rect(30px, 820px, 52px, 0); }
            58.8235294118% {
                clip: rect(41px, 820px, 59px, 0); }
            64.7058823529% {
                clip: rect(86px, 820px, 107px, 0); }
            70.5882352941% {
                clip: rect(112px, 820px, 76px, 0); }
            76.4705882353% {
                clip: rect(103px, 820px, 13px, 0); }
            82.3529411765% {
                clip: rect(17px, 820px, 6px, 0); }
            88.2352941176% {
                clip: rect(13px, 820px, 72px, 0); }
            94.1176470588% {
                clip: rect(70px, 820px, 85px, 0); }
            100% {
                clip: rect(38px, 820px, 9px, 0); } }

        @keyframes tit-ani-2 {
            0% {
                clip: rect(66px, 820px, 81px, 0); }
            5.8823529412% {
                clip: rect(29px, 820px, 26px, 0); }
            11.7647058824% {
                clip: rect(61px, 820px, 1px, 0); }
            17.6470588235% {
                clip: rect(70px, 820px, 50px, 0); }
            23.5294117647% {
                clip: rect(51px, 820px, 93px, 0); }
            29.4117647059% {
                clip: rect(31px, 820px, 32px, 0); }
            35.2941176471% {
                clip: rect(36px, 820px, 53px, 0); }
            41.1764705882% {
                clip: rect(100px, 820px, 100px, 0); }
            47.0588235294% {
                clip: rect(105px, 820px, 102px, 0); }
            52.9411764706% {
                clip: rect(20px, 820px, 22px, 0); }
            58.8235294118% {
                clip: rect(75px, 820px, 4px, 0); }
            64.7058823529% {
                clip: rect(13px, 820px, 14px, 0); }
            70.5882352941% {
                clip: rect(23px, 820px, 93px, 0); }
            76.4705882353% {
                clip: rect(53px, 820px, 70px, 0); }
            82.3529411765% {
                clip: rect(42px, 820px, 114px, 0); }
            88.2352941176% {
                clip: rect(43px, 820px, 78px, 0); }
            94.1176470588% {
                clip: rect(54px, 820px, 76px, 0); }
            100% {
                clip: rect(108px, 820px, 17px, 0); } }
        .tit-ani {
            position: relative;
            font-weight:normal;
            width: 300px;
            margin: 20px auto;
        }
        .tit-ani:before, .tit-ani:after {
            content: "三月初一";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            clip: rect(0, 0, 0, 0); }
        .tit-ani:after {
            left: 2px;
            text-shadow: -1px 0 red;
            animation: tit-ani-1 2s infinite linear alternate-reverse;
        }
        .tit-ani:before {
            left: -2px;
            text-shadow: 2px 0 #000;
            animation: tit-ani-2 3s infinite linear alternate-reverse;
        }
    </style>
</head>
<body>
<h1 class="tit-ani">
    三月初一
</h1>
</body>
</html>

 

posted @ 2017-03-01 14:04  dongxiaolei  阅读(1387)  评论(0)    收藏  举报