当前位置：首页 » 《资源分享》 » 正文

HTML+CSS+JS实现 ❤️svg图片透明层文本显示❤️_java李阳勇的博客

7 人参与  2021年10月09日 09:23  分类 : 《资源分享》  评论

点击全文阅读


🍅 作者主页：Java李杨勇 

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media (min-width: 767px) {
    * {
        box-sizing: border-box;
    }
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.father {
    background-image: url(../img/1.jpg);
    height: 100vh;
    width: 100%;
    display: block;
    position: relative;
    background-size: cover;
    border: 5px solid #000;
    background-color: rgba(#000, 0.3);
    overflow: hidden;
    font-family: "Abel", sans-serif;
}

.father svg a {
    height: 100%;
    width: 100%;
    position: relative;
}

.father svg .shapem,
.svg-section-text {
    opacity: 0;
    transition: opacity 0.5s;
    will-change: opacity;
}

.father svg .shapem:hover {
    opacity: 0.5;
    transition-duration: opacity 0.9s;
}

.father svg .svg-section:hover .svg-section-text {
    opacity: 1;
    transition-duration: opacity 0.9s;
}

.svg-section-far-left {
    fill: url(#gradient-far-left);
}

.svg-section-middle-left {
    fill: url(#gradient-middle-left);
}

.svg-section-middle-right {
    fill: url(#gradient-middle-right);
}

.svg-section-far-right {
    fill: url(#gradient-far-right);
}

.svg-skeleton {
    opacity: 0.1;
    fill: #fff;
}

.svg-section-text {
    pointer-events: none;
}

.svg-defs {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>svg图片透明层文本</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <svg class="svg-defs" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient-far-left" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#bbfff3" />
      <stop offset="53%" stop-color="#bbfff3" />
      <stop offset="62%" stop-color="#02ffd2" />
      <stop offset="100%" stop-color="#02ffd2" />
    </linearGradient>
    <linearGradient id="gradient-middle-left" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#caf2ff" />
      <stop offset="53%" stop-color="#caf2ff" />
      <stop offset="62%" stop-color="#540088" />
      <stop offset="100%" stop-color="#540088" />
    </linearGradient>
    <linearGradient id="gradient-middle-right" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#caf2ff" />
      <stop offset="53%" stop-color="#caf2ff" />
      <stop offset="62%" stop-color="#00c0ff" />
      <stop offset="100%" stop-color="#00c0ff" />
    </linearGradient>
    <linearGradient id="gradient-far-right" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#85BBC0" />
      <stop offset="48%" stop-color="#85BBC0" />
      <stop offset="58%" stop-color="#a90b05" />
      <stop offset="100%" stop-color="#a90b05" />
    </linearGradient>
  </defs>
</svg>

    <div class="father">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1133.86 637.79" height="100%" width="100%" preserveAspectRatio="none">
    <g class="svg-section">
      <a class="svg-section-link" href="#">
        <path class="svg-section-far-right shapem" d="M1133.86-.21H713.23L1126 635.73c.49.76.81 1.55.97 2.36.02.1.1.17.21.17l6.68 2.46V-.21z" />
      </a>
      <g class="svg-section-text">
        <text fill="#7F7F7E" x="910" y="130" font-size="20px">梦想</text>
        <text fill="#7F7F7E" x="910" y="150" font-size="12px">梦想成真</text>
        <text fill="#7F7F7E" x="910" y="165" font-size="12px">全球博客</text>
      </g>
    </g>
    <g class="svg-section">
      <a class="svg-section-link" href="#">
        <path class="svg-section-middle-right shapem" d="M1089.2 622.55H879.5L583.27 166.14l98.76-153.37c5.18-8.07 16.87-8.07 22.09 0l388.55 603.43c1.75 2.72-.21 6.35-3.47 6.35z" />
      </a>
      <g class="svg-section-text">
        <text fill="#7F7F7E" x="670" y="130" font-size="20px">生存</text>
        <text fill="#7F7F7E" x="670" y="150" font-size="12px">什么是生存</text>
        <text fill="#7F7F7E" x="670" y="165" font-size="12px">历史</text>
        <text fill="#7F7F7E" x="670" y="180" font-size="12px">GET INVOLED</text>
      </g>
    </g>
    <g class="svg-section">
      <a class="svg-section-link" href="#">
        <path class="svg-section-middle-left shapem" d="M564.36 166.14L268.45 622.1H58.1c-3.26 0-5.22-3.63-3.42-6.36L443.22 12.32c5.18-8.07 16.87-8.07 22.09 0l99.05 153.82z" />
      </a>
      <g class="svg-section-text">
        <text fill="#7F7F7E" x="410" y="130" font-size="20px">做事</text>
        <text fill="#7F7F7E" x="410" y="150" font-size="12px">如果你可以</text>
        <text fill="#7F7F7E" x="410" y="165" font-size="12px">WHT IF SINAI</text>
        <text fill="#7F7F7E" x="410" y="180" font-size="12px">GATHERINGS</text>
        <text fill="#7F7F7E" x="410" y="195" font-size="12px">RETREATS</text>
      </g>
    </g>
    <g class="svg-section">
      <a class="svg-section-link" href="#">
        <path class="svg-section-far-left shapem" d="M.53 0v638.84h18.21c.1-1.03.46-2.06 1.09-3.02L432.49 0H.53z" />
      </a>
      <g class="svg-section-text">
        <text fill="#7F7F7E" x="150" y="130" font-size="20px">水平</text>
        <text fill="#7F7F7E" x="150" y="150" font-size="12px">志愿者</text>
        <text fill="#7F7F7E" x="150" y="165" font-size="12px">CHANGE MAKERS</text>
        <text fill="#7F7F7E" x="150" y="180" font-size="12px">SUPPORT WHT IF</text>
        <text fill="#7F7F7E" x="150" y="195" font-size="12px">CONTACT FORM</text>
        <text fill="#7F7F7E" x="150" y="210" font-size="12px">F&Q</text>
      </g>
    </g>
    <a href="#">
      <path class="svg-skeleton" d="M1122.1 629.84c-.14-.85-.47-1.68-.98-2.48L718.78 7.51 713.77-.2h-41.44l-5.01 7.71-93.52 144.08L480.3 7.51 475.29-.2h-42.06l-5.01 7.71-402 619.41c-.61.93-.96 1.93-1.06 2.93-.43 3.78 2.5 7.5 6.72 7.5h236.48c.69.33 1.51.45 2.32.45h844.76c4.4-.01 7.36-4.04 6.66-7.96zm-853.65-7.74H58.1c-3.26 0-5.22-3.63-3.43-6.36L443.22 12.32c.22-.34.44-.66.69-.97.15-.2.3-.39.46-.57.2-.23.4-.45.61-.66.03-.03.06-.07.1-.09.17-.18.34-.34.52-.5.17-.15.35-.3.53-.44.16-.13.32-.25.48-.36.15-.11.3-.22.45-.31.03-.03.06-.05.1-.07.23-.15.46-.29.69-.41.02-.02.04-.03.06-.04.23-.13.47-.25.71-.36.02-.02.04-.03.06-.03.22-.11.45-.21.68-.29.19-.08.38-.15.57-.22.17-.06.35-.12.53-.17.19-.06.37-.11.56-.16.31-.08.63-.15.95-.2.13-.03.27-.05.4-.06.15-.03.3-.05.45-.06.71-.08 1.43-.1 2.15-.06.23.01.47.03.71.06.18.02.36.04.54.07.45.06.89.15 1.33.27.13.03.25.07.38.1.19.06.37.11.55.18.23.07.46.16.68.25.23.09.45.19.67.29.27.12.53.26.79.4s.52.3.77.46c.21.13.42.28.63.43.19.14.38.29.56.44.16.13.32.26.47.4l.09.09c.18.16.35.32.52.5.61.63 1.16 1.32 1.66 2.09l99.04 153.82L268.45 622.1zm581.99 0H295.03c-2.04-1.06-2.98-3.75-1.59-5.91l280.37-435.38 280.05 434.93c1.8 2.73-.16 6.36-3.42 6.36zm238.76.45H879.5L583.27 166.14l98.76-153.37c.19-.29.39-.58.6-.85.04-.07.09-.14.15-.2.16-.21.33-.41.5-.6.09-.1.18-.2.28-.3.18-.21.38-.41.59-.6.24-.22.48-.43.73-.64.03-.02.06-.04.08-.06.25-.19.5-.38.76-.56.33-.23.68-.44 1.04-.63.28-.16.57-.3.86-.43.31-.15.63-.28.95-.39.21-.08.43-.16.65-.22.21-.06.43-.12.65-.18.14-.04.28-.07.42-.09.16-.04.33-.07.5-.1.19-.04.37-.06.56-.09.17-.02.34-.04.51-.05.03-.01.07-.01.11-.01.14-.02.28-.03.42-.03.44-.03.89-.03 1.34 0 .14 0 .28.01.42.03.03 0 .07 0 .11.01.17.01.34.03.51.05.19.03.38.05.56.09.15.02.3.05.45.09.16.02.31.06.47.1.22.06.44.12.65.18.22.06.43.14.65.22.32.12.64.25.95.39.28.12.56.26.83.41.13.07.26.14.39.23.24.12.46.27.69.42.26.18.51.37.76.56.03.02.05.04.08.06.25.21.5.42.73.64.22.2.43.41.63.63.09.08.17.17.25.27.18.19.34.39.5.6.27.33.52.68.76 1.05l388.55 603.43c1.75 2.72-.21 6.35-3.47 6.35z" />
    </a>
  </svg>

    </div>


</body>

</html>

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方


点击全文阅读


本文链接：http://zhangshiyu.com/post/29623.html

获取  代码  实战  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 林柒薇宋延桉小说全文免费阅读穿到八零年代和司令丈夫离婚那天全文免费阅读
  • 好看的妻子嫁作他人妇，我和女儿不认小说-妻子嫁作他人妇，我和女儿不认最新章节阅读
  • 《七零：那两口子万人嫌，太发癫了》完整版-盛春香裴清远在线全文阅读
  • 最新小说被山里糙汉追着满地跑主角闵小小闵烨全文在线阅读
  • 李慕云陶金辉全文小说最新章节阅读李慕云陶金辉
  • 《看到三十年后的联姻生活，我决定离婚》颜雯程绛-小说txt全文阅读
  • 长公主她风华正茂无弹窗在线阅读
  • 你敢说话，我就敢质疑主角是李云初张景小说百度云全文完整版阅读
  • 娶资助的贫困生当晚，她和竹马一起入洞房小说(完结)-安枫符垚无删减阅读
  • 心机女插足后，她和相亲对象闪婚了（全本）姜初棠夏芝芝完整章节列表免费阅读
  • 被撞流产后，我选择离婚小说百度云完整章节列表免费阅读
  • 沈糯周钦然《老公白月光在我家别墅养胎》全章节免费阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1