使用mask雕刻镂空背景

最新推荐文章于 2024-03-27 20:44:29 发布

春风欲雨

最新推荐文章于 2024-03-27 20:44:29 发布

阅读量421

点赞数

分类专栏： css 前端小知识点文章标签：镂空背景

本文链接：https://blog.csdn.net/WebDestiny/article/details/100772374

版权

前端小知识点同时被 2 个专栏收录

69 篇文章 2 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

效果图：

在线演示

代码：

<template>
  <div>
    <div class="bruce pr flex-ct-x">
      <div class="mask-layer"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
// 定义变量
$mask-bg: "https://yangzw.vip/static/codepen/mask-bg.jpg";
$mask-text: "https://yangzw.vip/static/codepen/mask-text.jpg";
$logo: "https://yangzw.vip/static/codepen/logo-netease.svg";
.bruce {
  overflow: hidden;
  &::after {
    position: absolute;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    // 设置背景图，并加滤镜模糊处理
    background: url($mask-bg) no-repeat center/cover;
    filter: blur(10px);
    content: "";
  }
}
.mask-layer {
  position: relative;
  z-index: 9;
  width: 600px;
  height: 300px;
  background: url($mask-text) left center/150% auto;
  mask: url($logo) center/cover;
  // infinite（循环）
  animation: move 10s infinite;
}
@keyframes move {
  0% {
    background-position-x: 0;
  }
  50% {
    background-position-x: 100%;
  }
}
</style>