【vue.js】手把手教你用css实现毛巾纹理文字效果

饺子大魔王12138

已于 2023-10-18 10:47:37 修改

阅读量146

点赞数

文章标签： vue.js 前端 javascript css

于 2023-10-18 10:45:25 首次发布

本文链接：https://blog.csdn.net/u010726809/article/details/133900904

版权

效果

在这里插入图片描述

背景

通过svg的filter等属性实现背景凹凸不平质感的文字，我们知道css有filter属性，那么svg可以理解为更强大的css，为了实现凹凸不平，主要思路是动态生成灰度图。废话不多说，3、2、1，上代码~

代码

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
  <title>毛巾测试</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="shortcut icon" href="../../favicon.ico">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>
</head>
<body>
  <div id="app">
    <div style="width: 300px;margin: 10px auto;display: flex;">
      <el-select v-model="backgroundImg">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="text"></el-input>
      <el-color-picker v-model="color" />
    </div>
    <svg viewBox="0 0 600 330" style="width: 60%;margin: 0 auto;display: block;">
      <defs>
        <filter id="conform">
          <feImage
            :href="`./${backgroundImg}`"
            x="0"
            y="0"
            width="100%"
            height="100%"
            preserveAspectRatio="none"
            result="ORIGIN_IMAGE"
          ></feImage>
          <feColorMatrix
            in="ORIGIN_IMAGE"
            type="saturate"
            values="0"
            result="GRAY_IMAGE"
          ></feColorMatrix>
          <feDisplacementMap
            in="SourceGraphic"
            in2="GRAY_IMAGE"
            scale="15"
            xChannelSelector="R"
            yChannelSelector="R"
            result="TEXTURE_TEXT"
          ></feDisplacementMap>
          <feImage
            :href="`./${backgroundImg}`"
            x="0"
            y="0"
            width="100%"
            height="100%"
            preserveAspectRatio="none"
            result="BG"
          ></feImage>
          <feColorMatrix
            in="TEXTURE_TEXT"
            result="OPACITY_TEXT"
            type="matrix"
            values="1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    0 0 0 0.9 0"
          ></feColorMatrix>
          <feBlend
            in="BG"
            in2="OPACITY_TEXT"
            mode="multiply"
            result="BLENDED_TEXT"
          ></feBlend>
        </filter>
      </defs>
      <Image
        :href="`./${backgroundImg}`"
        x="0"
        y="0"
        width="100%"
        height="100%"
        preserveAspectRatio="none"
      ></Image>
      <text
        x="50%"
        y="50%"
        font-size="9em"
        font-weight="bold"
        text-anchor="middle"
        alignment-baseline="middle"
        :fill="color"
        filter="url(#conform)"
      >{{ text }}</text>
    </svg>
  </div>
  <script type="text/javascript">
    const { createApp, reactive, ref } = Vue
    const app = createApp({
      setup() {
        const text = ref('纹理文字')
        const color = ref('#73767a')
        const backgroundImg = ref('towel3.jpg')
        const options = ref([
          {
            value: 'towel.jpg',
            label: 'towel.jpg'
          },
          {
            value: 'towel2.jpg',
            label: 'towel2.jpg'
          },
          {
            value: 'towel3.jpg',
            label: 'towel3.jpg'
          },
        ])
        return {
          text,
          color,
          backgroundImg,
          options
        }
      }
    })
    app.use(ElementPlus).mount("#app")
  </script>
</body>
</html>

饺子大魔王12138

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【vue.js】手把手教你用css实现毛巾纹理文字效果

通过svg的filter等属性实现背景凹凸不平质感的文字，我们知道css有filter属性，那么svg可以理解为更强大的css，为了实现凹凸不平，主要思路是动态生成灰度图。废话不多说，3、2、1，上代码~
复制链接

扫一扫