JS相册图片网格布局特效代码下载


JS相册图片网格布局特效代码下载
JS相册图片网格布局特效代码下载以及相册图片、网格布局等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<main>
  <a href="#">
    <img src="img/1.jpg" alt="A dog gazing at the sky and at a promising future. Or a nearby squirrel." />
  </a>
  <a href="#">
    <img src="img/2.jpg" alt="A bulldog with a lot of moxie" />
  </a>
  <a href="#">
    <img src="img/3.jpg" alt="A daring dog carrying a flower between its romantic fangs" />
  </a>
  <a href="#">
    <img src="img/4.jpg" alt="A cuddly young pup with a sassy red collar" />
  </a>
  <a href="#">
    <img src="img/5.jpg" alt="An extremely active dog jumping between the ocean's waves" />
  </a>
  <a href="#">
    <img src="img/6.jpg" alt="Two dogs cheerfully hopping along a beaten path. At least one of them is." />
  </a>
  <a href="#">
    <img src="img/7.jpg" alt="A dog diligently sitting and waiting for someone special, with a welcoming flower" />
  </a>
  <a href="#">
    <img src="img/8.jpg" alt="A carefree dog licking its nose in a rather blurry picture" />
  </a>
  <a href="#">
    <img src="img/9.jpg" alt="A smart, glass-wearing dog resting on an open book" />
  </a>
  <a href="#">
    <img src="img/10.jpg" alt="Two curious dogs looking above with great expectations" />
  </a>
</main>
<div>
  <button aria-label="Close overlay">
    <svg viewBox="-50 -50 100 100" width="40" height="40">
      <g fill="none" stroke="currentColor" stroke-width="20" stroke-linecap="round">
        <path transform="rotate(45)" d="M -40 0 h 80 m -40 -40 v 80" />
      </g>
    </svg>
  </button>
  <img src="img/1.jpg" alt="A dog gazing at the sky and at a promising future. Or a nearby squirrel." />
</div>

相关推荐

发表评论

相关文章