HTML5+CSS3小实例：抖音LOGO故障风文字动画特效

耀南.

于 2024-01-18 16:53:37 发布

阅读量518

点赞数 10

分类专栏：前端好玩炫酷的动画小案例文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/YN2000609/article/details/135678846

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

效果图：

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>抖音LOGO故障风文字动画特效</title>
    <link rel="stylesheet" href="143.css">
</head>

<body>
    <div class="container">
        <div class="logo"></div>
        <div class="text">hello world</div>
    </div>
</body>

</html>

css：

*{
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    /* 溢出隐藏 */
    overflow: hidden;
}
.container{
    position: relative;
}
.logo{
    width: 40px;
    height: 218px;
    background-color: #fff;
    /* 两种方式,两个投影(红色和青色) */
    box-shadow: 10.6px 10px 0 #ff0050;
    /* 提供一篇关于drop-shadow的文章,看完你会恍然大悟的 */
    /* https://zhuanlan.zhihu.com/p/195792157 */
    filter: drop-shadow(-10px -10px 0 #00ffff);
    /* 执行动画: 动画名 时长 由慢到快 停留在最后一帧 */
    animation: logo 3.5s ease-in forwards;
    position: absolute;
    left: 52%;
}
/* 音符左下角的圆圈部分 */
.logo::before{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border: 40px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    transform: rotate(45deg);
    top: 125px;
    left: -140px;
    filter: drop-shadow(15px 0 0 #ff0050);
}
/* 音符右上角的尾巴部分 */
.logo::after{
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 40px solid transparent;
    border-radius: 50%;
    border-bottom-color: #fff;
    transform: rotate(45deg);
    top: -110px;
    right: -180px;
    filter: drop-shadow(15px 0 0 #ff0050);
}
.text{
    color: #fff;
    margin-top: 380px;
    font-size: 90px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    width: 100vw;
    text-align: center;
    position: relative;
}
.text::before,
.text::after{
    content: "hello world";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.text::before{
    left: -3px;
    text-shadow: -2px 0 #00ffff;
    /* 执行动画:动画名 时长 线性的 无限次播放 反向播放 */
    animation: fault1 1.5s linear infinite reverse;
}
.text::after{
    left: -3px;
    text-shadow: -2px 0 #ff0050;
    animation: fault2 1.5s linear infinite reverse;
}

/* 定义动画 */
/* logo动画 */
@keyframes logo {
    5%{
        transform: skewX(7deg) translate(-30px);
    }
    7%{
        transform: skewX(-6deg) translate(18px);
    }
    9%{
        transform: skewX(5deg) translate(-8px);
    }
    10%{
        transform: skewX(-4deg) translate(6px);
    }
    11%{
        transform: skewX(7deg) translate(-30px);
    }
    12%{
        transform: skewX(-2deg) translate(2px);
    }
    13%{
        transform: skewX(0deg) translate(0px);
        /* 加一点模糊 */
        filter: drop-shadow(-10px -10px 0 #00ffff) blur(1px);
    }
    20%{
        /* 取消模糊 */
        filter: drop-shadow(-10px -10px 0 #00ffff) blur(0px);
    }
}
/* 故障动画1 */
@keyframes fault1 {
    0%{
        /* --t,--b为自定义属性,通过var函数对其调用 */
        /* 这两个数值是随机生成的,可以自己进行设定,数值不一样,抖动的效果也会不一样 */
        --t:132px;
        --b:101px;
        /* 剪裁一个矩形(top,right,bottom,left) 和margin是一样的 */
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    10%{
        --t:40px;
        --b:66px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    20%{
        --t:137px;
        --b:61px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    30%{
        --t:133px;
        --b:74px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    40%{
        --t:59px;
        --b:130px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    50%{
        --t:22px;
        --b:67px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    60%{
        --t:10px;
        --b:105px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    70%{
        --t:105px;
        --b:13px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    80%{
        --t:66px;
        --b:39px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    90%{
        --t:36px;
        --b:128px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    100%{
        --t:14px;
        --b:100px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
}
/* 故障动画2 */
@keyframes fault2 {
    0%{
        --t:129px;
        --b:36px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    10%{
        --t:85px;
        --b:66px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    20%{
        --t:148px;
        --b:138px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    30%{
        --t:69px;
        --b:54px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    40%{
        --t:146px;
        --b:34px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    50%{
        --t:102px;
        --b:80px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    60%{
        --t:106px;
        --b:99px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    70%{
        --t:20px;
        --b:78px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    80%{
        --t:78px;
        --b:52px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    90%{
        --t:67px;
        --b:70px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
    100%{
        --t:83px;
        --b:40px;
        clip: rect(var(--t),100vw,var(--b),0px);
    }
}