使用html+css实现的文字效果

故障的文字风格

 

 

 

<!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>
    <style>
.text{
    display: inline-block;
    left: 400px;
    top: 100px;
    font-size: 3.5em;
    font-weight: 600;
    color: white;
    position: relative;
}
.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: Fault-before 3s infinite linear alternate-reverse;
}
.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: Fault-after 3s infinite linear alternate-reverse;
}


/*设置两个伪元素before和after，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，
制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素*/

@keyframes Fault-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}

@keyframes Fault-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

主要是设置了两个keyframes的动画效果，分别为 animation-before 、animation-after，前者是准备给伪元素 before 使用的，后者是给伪元素 after 使用的。

其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果。

 

    </style>
</head>
<body>
    <div class="text" data-text="软件工程故障风格文字">
        软件工程故障风格文字
    </div>
</body>
</html>

 

 

 

 

posted @ 2022-03-19 19:01  早睡真的难  阅读(203)  评论(0)    收藏  举报