太空怪物（svg遮罩很酷）(space monster（svg masking is cool）)

最新推荐文章于 2022-04-24 16:12:51 发布

Super_Calvin

最新推荐文章于 2022-04-24 16:12:51 发布

阅读量305

点赞数

分类专栏： # 几何图形文章标签： space monster 太空怪物

本文链接：https://blog.csdn.net/weixin_45544796/article/details/109310875

版权

几何图形专栏收录该内容

89 篇文章 2 订阅

订阅专栏

太空怪物（svg遮罩很酷）(space monster svg masking is cool）

示例
HTML
CSS

更多有趣示例尽在知屋安砖社区

示例

在这里插入图片描述

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <mask id="MASK" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">
      <image xlink:href="https://media.giphy.com/media/3o85xyj0M45c9MkXhS/giphy.gif" 
        height="100%"
        width="100%"/>
    </mask>      
  </defs>
  
  <image mask="url(#MASK)" x="0" y="-20%" class="space" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/space.jpg" 
        height="198%" width="200%"/>
</svg>

CSS

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

svg {
  width: 300px;
  height: 300px;
}