潜泳的字体

最新推荐文章于 2022-01-24 23:56:49 发布

K.Dream

最新推荐文章于 2022-01-24 23:56:49 发布

阅读量158

点赞数

分类专栏： html css

原文链接：https://youtu.be/UTFatnsd0RI

版权

css 同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

84 篇文章 0 订阅

订阅专栏

潜泳的字体

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="floating-text" data-text="Floating">Floating</div>
</body>
</html>

CSS

*{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    font-family: sans-serif; /*字体*/
}
body{
    height: 100vh; /*高*/
    background:linear-gradient(0deg,#3498db 50%,#fff 0%); /*渐变*/
    display: flex; /*弹性布局*/
    justify-content: center; /*主轴排序*/
    align-items: center; /*交叉轴排序*/
}
.floating-text{
    text-transform: uppercase; /*大写*/
    font-size: 80px; /*字体大小*/
    font-weight: 900; /*字体宽度*/
    letter-spacing: 6px; /*字符间距*/
    color: #ffffff40; /*字体颜色*/
    transform: translateY(0); /*Y轴垂直移动*/
    animation:  f11 3s infinite linear; /*动画：名字 3秒完成 重复 线性时间*/
}

.floating-text::before{ /**/
    content: attr(data-text); /*添加文字（按照自定义的属性）*/
    position: absolute; /*绝对定位*/
    color: #000; /*颜色*/
    clip-path: polygon(0 0,100% 0,100% 50%,0 50%); /*多边形裁剪 x y,x1 y1,.....,xn yn*/
    animation:  f12 3s infinite linear;
}
@keyframes f11{ /*动画f11*/
    30%{
        transform: translateY(10%) rotate(4deg); /*y轴移动10%*/
    }
    70%{
        transform: translateY(10%) rotate(-4deg);
    }
}
@keyframes f12{
    30%{
        clip-path: polygon(0 0,100% 0,100% 24%,0 56%);
    }
    70%{
        clip-path: polygon(0 0,100% 0,100% 56%,0 24%);
    }
}