美文网首页神奇的css
用clip-path实现一个水波纹的字体

用clip-path实现一个水波纹的字体

作者: 苏苏哇哈哈 | 来源:发表于2021-10-14 00:36 被阅读0次

1.实现效果

GIF111.gif

2.实现步骤

2.1.写一个h2标签

<h2 content="苏苏">苏苏</h2>

2.3.设置字体镂空

body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #222;
    min-width: 1200px;
}

h2 {
    color: #fff;
    font-size: 8em;
    color: transparent;
    -webkit-text-stroke: 2px #00ffff;
    position: relative;
}

如下图效果:


在这里插入图片描述

2.3text-stroke属性

使用text-stroke文字的描边属性,color: transparent,实现字体镂空的效果。

text-stroke是: text-stroke-width和text-stroke-color两个属性的简写写法。

text-stroke-width :设置或检索对象中的文字的描边厚度
text-stroke-color :设置或检索对象中的文字的描边颜色

2.4 h2添加一个相同文字的伪元素

h2::before {
    content: attr(content);
    position: absolute;
    top: 0;
    left: 0;
    color: #00ffff;
    animation: a 4s ease-in-out infinite;
}

content设置伪元素的内容,结合attr属性获取元素属性内容。

为其设置一个动画效果

@keyframes a {

    0%,
    100% {
        -webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
        clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);

    }

    50% {
        -webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
        clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
    }
}

2.5clip-path

clip-path创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。
clip-path的属性值可以是以下几种:


在这里插入图片描述

这里用到的就是多变形,推荐一个clip-path在线网站,快速帮助我们绘画出想要的形状。
clip-path在线生成网站

在这里插入图片描述

3.完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: #222;
            min-width: 1200px;
        }

        h2 {
            color: #fff;
            font-size: 8em;
            color: transparent;
            -webkit-text-stroke: 2px #00ffff;
            position: relative;
        }

         h2::before {
            content: attr(content);
            position: absolute;
            top: 0;
            left: 0;
            color: #00ffff;
            animation: a 4s ease-in-out infinite;
        }

        @keyframes a {

            0%,
            100% {
                -webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
                clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);

            }

            50% {
                -webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
                clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
            }
        }
    </style>
    <body>
        <h2 content="苏苏">苏苏</h2>
    </body>
</html>

4.在线预览

苏苏的codepen

相关文章

  • 用clip-path实现一个水波纹的字体

    1.实现效果 2.实现步骤 2.1.写一个h2标签 2.3.设置字体镂空 如下图效果: 2.3text-strok...

  • clip-path + SVG 实现字体进度

    有点意思的DEMO,本来想给我司产品做点页面加载的动画,后来想想终极解决方案还是优化首屏的资源大小、采用骨架屏的方...

  • css svg clippath mask 使用svg蒙版制作特

    前提 css 现在已经支持clip-path,mask进行图片的裁切,从而实现各种特殊形状 clip-path 和...

  • 年薪80w程序员教你用C语言实现水波纹效果,小白秒变大神!

    今天教大家一个比较简单的C语言程序,通过用easyx库实现的水波纹效果。说到这里可能大家对水波纹似懂非懂,那么你肯...

  • 2019-09-25

    ImageButtom 实现点击水波纹效果和图标切换 一个简单的点击效果: 一:水波纹的实现 5.0以上bu...

  • 2019-11-05

    水波纹,interpolator加速器属性值 ------- 水波纹效果实现: 点击水波纹效果:只有android...

  • 水波纹效果实现

    水波纹兼容5.0以下版本 水波纹的两种实现方式和兼容 1.1: Style 样式方式实现 5.0以上——draw...

  • Swift实现水波纹效果

    水波纹效果 网上虽然很多水波纹动画效果实现的文章,但是我觉得有点讲解的不清楚,有点过于深化了。这篇我喜欢用笨方法让...

  • css和svg多边形按钮实现

    1. css实现 1.1 强行实现 页面效果 代码 总结不适用背景颜色变化较多时。 1.2 clip-path实现...

  • clip-path属性

    运用clip-path的纯CSS形状变换clip-path练习 clip-path 可以用来裁剪你想要的形状一、图...

网友评论

    本文标题:用clip-path实现一个水波纹的字体

    本文链接:https://www.haomeiwen.com/subject/owlyoltx.html