通过CSS实现服装切换效果(mask-image/mix-blend-mode)

写在开头

哈喽,各位好啊😀,小编今天在网上冲浪的时候,发现了一个挺有趣的服装切换效果。

原效果地址:传送门

它是通过 CSSmask-image 属性和 mix-blend-mode 属性来实现的。

代码实现

这里小编以 Vue 的技术来实现,来看看具体的代码实现:

javascript 复制代码
<template>
  <div>
    <h1>服装效果切换</h1>
    <div class="content">
        <img class="clothing" src="./assets/clothing.png" />
        <div class="clothing-overlay">
            <div :style="{ backgroundImage: `url(${backgroundImage})` }"
              class="clothing-pattern"
            />
            <img class="clothing-low-template"
              src="./assets/clothingLowTemplate.png"
            />
        </div>
    </div>
    <div class="tool">
      <div
        @click="handleClick(item)"
        v-for="(item, index) in templateData"
        :key="index"
        class="tool-item"
       >
          <img :src="item.image" />
       </div>
    </div>
  </div>
</template>

<script>
import template1 from "./assets/template1.png";
import template2 from "./assets/template2.png";
import template3 from "./assets/template3.png";
import template4 from "./assets/template4.png";

export default {
  data() {
    return {
        templateData: [
            { image: template1 },
            { image: template2 },
            { image: template3 },
            { image: template4 },
        ],
        backgroundImage: "",
    };
  },
  methods: {
    handleClick(item) {
      this.backgroundImage = item.image;
    },
  },
};
</script>

<style>
body {
    background-color: #404749;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {
    text-align: center;
    color: #fff;
}
.content {
    width: 280px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.clothing {
    width: 100%;
    height: 100%;
}
.clothing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.clothing-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url(./assets/clothingMask.png);
    mask-image: url(./assets/clothingMask.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    display: block;
}
.clothing-low-template {
    width: 100%;
    mix-blend-mode: multiply;
    position: relative;
}
.tool {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.tool-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    margin: 0 10px;
    cursor: pointer;
}
</style>

整体实现并不难,核心需要注意两个 CSS 属性:

mask-image :元素蒙版层的图像。这个图像一般是一张图片,你可以认为该属性会把一张图片完整覆盖在一个元素上,无论这个元素是任何形状,都会完整包裹,并且最重要的一点,当这个元素有透明部分时,这部分透明区域是不被包裹的。

mix-blend-mode:元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。这个属性经常被用于处理文字的颜色上,通过它能让文字的颜色呈现更有趣的效果,这里小编找了一个案例,你可以点进去看看应该就能大概明白了 传送门。 而本文的应用是将它用于一张底图背景上,用于制作服装的纹理效果,具体如下:

(如果你熟悉 Photoshop 的话,它其实就是 PS 的 "混合模式" 而已 👻 )

兼容性

它们的兼容性也还不错。


至此,本篇文章就写完啦,撒花撒花。

希望本文对你有所帮助,如有任何疑问,期待你的留言哦。

老样子,点赞+评论=你会了,收藏=你精通了。

相关推荐
亭台烟雨中11 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷25 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san28 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts