正文

CSS裁剪与裁剪动画

譬如朝露 V管理员/ / 0 评论/ 1015阅读
05 19 
<!--
 * @Author: your name
 * @Date: 2021-05-10 10:01:05
 * @LastEditTime: 2021-05-19 11:03:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \css3\animatePath.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root {
       
   
        --clip-width-1: 110px;
        --clip-width-2: 108px;
        --clip-height-1: 40px;
        --clip-height-2: 38px;
      
    }

    .animate-path {
        width: 100px;
        height:30px;
        margin: auto;
        color:  rgb(24, 144, 255);;
        box-shadow: inset 0 0 0 1px  rgb(24, 144, 255);;
        position: relative;
    }

    .animate-path::before,
    .animate-path::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .animate-path {
        left: -50px;
    }

    .animate-path::before,
    .animate-path::after {
        content: '';
        z-index: -1;
        margin: -5%;
        box-shadow: inset 0 0 0 2px;
        -webkit-animation:clipMe1 8s linear infinite;
        animation:clipMe1 8s linear infinite;
    }

    .animate-path::before {
        -webkit-animation-delay: -4s;
        animation-delay: -4s;
    }

    .text {
        color: #ccc;
        font-size:14px;
       
        display: flex;
        width: 100%;
        height: 100%;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        font-weight: bolder;
    }

    @keyframes clipMe1 {
0%,
        100% {
            clip: rect(0px, 110px, 2px, 0px);
        }

        25% {
            clip: rect(0px, 2px, 40px, 0px);
        }

        50% {
            clip: rect(38px, 110px, 110px, 0px);
        }

        75% {
            clip: rect(0px, 110px, 40px, 108px);
        }
        /* 0%,
        100% {
            clip: rect(0px, var(--clip-width-1), 2px, 0px);
        }

        25% {
            clip: rect(0px, 2px, var(--clip-height-1), 0px);
        }

        50% {
            clip: rect(var(--clip-height-2), var(--clip-width-1), var(--clip-width-1), 0px);
        }

        75% {
            clip: rect(0px, var(--clip-width-1), var(--clip-height-1), var(--clip-width-2));
        } */
    }
    .clip{
        width: 100px;
        height: 100px;
        background-color: transparent;
        
        position: absolute;
        box-shadow: inset 0 0 0 1px  rgb(24, 144, 255);;
        /* animation: clip 2s linear infinite; */
        /* 从上到下截取10px不显示，从左到右截取100px显示，从上到下截取1px显示，从左到右截取5px不显示  也就是前面和最后一个参数，取的是不显示范围，决定显示的是中间的两个参数 */
        /* clip: rect(10,100px,1px,5px); */  
        clip: rect(0,2px,100px,0);
    }
    @keyframes clip{
        0%,100%{
            clip: rect(0,100px,1px,0);

        }
        75%{
            clip: rect(0,2px,100px,0);
        }
        
    }
</style>

<body>

    <div class="animate-path"><span class="text">天恒大厦</span>
    </div>
    <div class="clip">

    </div>
</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。