css特效文字

smartwange

已于 2023-06-04 11:29:53 修改

阅读量764

点赞数

分类专栏： css 文章标签： css 前端 html

于 2023-06-03 22:08:09 首次发布

本文链接：https://blog.csdn.net/qq_21383977/article/details/131026366

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用css样式属性

文字肖像特效

-webkit-background-clip: text;

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
        }

        .desc {
            height: 100vh;
            overflow: hidden;
            color: transparent;
            line-height: 14px;
            letter-spacing: -.05em;
            font-size: 16px;
            background-image: url('./dist/assets/nx.png'), url('./dist/assets/nx.png');
            background-blend-mode: soft-light;
            background-position: bottom;
            background-repeat: no-repeat;
            background-size: contain;
            background-clip: text;
            -webkit-background-clip: text;
        }
    </style>
</head>

<body>
    <div class="desc">
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML

        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        child element. The used values of that element's background properties are their initial values, and the
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        propagated values are treated as
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
        element is none and its background-color is transparent, user agents must instead propagate the computed values
        of the background properties from that element's first HTML
        if they were specified on the root element. It is recommended that authors of HTML documents specify
        the canvas background for theelement rather than the HTML element.
        For documents whose root element is an HTML element: if the computed value of background-image on the root
    </div>

</body>

</html>

文字蒙版视频

文字背后播放视频 mix-blend-mode

<!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>
    video {
        height: 100vh;
        width: 100vw;
    }

    .container {
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        mix-blend-mode: screen;
    }

    .container h1 {}
</style>

<body>
    <video preload="auto" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" class="no-cursor" autoplay loop muted>
    </video>
    <div class="container">
        <h1>hello world</h1>
    </div>
</body>
<script>

</script>

</html>

使用svg特性

svg css路径动画

https://pixso.cn/ 新建文件导出svg

<!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>
    svg {
        width: 80vw;
        overflow: hidden;
        height: 80vh;
    }
</style>

<body>
    <svg width="783.289673" height="290.340057" viewBox="0 0 783.29 290.34" fill="none"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <desc>
            Created with Pixso.
        </desc>
        <!-- 删除path的  stroke="#000000"  属性，隐藏路径 -->
        <!--  修改id为自定义值-->
        <path id="wavpath"
            d="M0.394897 250.441C146.395 62.4414 131.395 -116.559 331.395 98.4414C531.395 313.441 623.395 294.441 640.395 284.441C657.395 274.441 813.395 119.441 777.395 31.4414" />
        <!-- <defs /> -->
        <!-- 添加text文字元素 -->
        <text fill="#000">
            <!-- 设置文字路径，为上面svg路径，通过href引用上面的id -->
            <textPath href="#wavpath">
                <!-- 添加文字动画，attributeName设置动画元素需要被改变的属性名。 -->
                <!-- startOffSet 控制文本位置距离路径起始位置的偏移量 -->
                <!-- from to分别定义初始值和结束值 duration定义动画的持续时间 重复 -->
                <animate attributeName="startOffset" from="-50%" to="110%" dur="10s" repeatCount="indefinite"></animate>
                自定义文字动画
            </textPath>
        </text>
    </svg>


</body>
<script>

</script>

</html>