CSS3漂亮的相册集

最新推荐文章于 2022-12-30 09:55:05 发布

huxiaoxiao.

最新推荐文章于 2022-12-30 09:55:05 发布

阅读量223

点赞数

分类专栏： css 文章标签：前端 css3

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121533357

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

使用鼠标的悬停做出漂亮的照片样式：

布局部分：

<body>
    <header>
      <h1>美丽人像图集</h1>
    </header>
    <section>
      <div class="photo">
        <ul>
          <li>
            <a href=""><img src="img/1.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/2.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/3.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/5.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/6.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/7.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/8.jpg" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="img/9.jpg" alt="" /></a>
          </li>
        </ul>
      </div>
    </section>
  </body>

样式部分：

<style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        /* 注意： 在背景设置线性渐变的时候，同时设置背景图的时候，必须 使用简写。全写，样式，上下会被覆盖！ */
        /* background-image: linear-gradient(
          rgba(255, 255, 255, 0),
          rgba(0, 0, 0, 1)
        );
        background-image: url("./img/03.jpg"); */

        background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)),
          url("./img/03.jpg");

        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
        font-family: "微软雅黑";
      }

      header h1 {
        font-size: 40px;
        text-align: center;
        color: #fff;
        margin: 20px auto;
        /* 文字内容投影（阴影） 
        rgba(0, 0, 0, 50%) 注意：a透明度的值 可以使用小数 也可以使用百分比
        */
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 50%);
      }
      .photo {
        width: 830px;
        margin: 0 auto;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        overflow: hidden;
      }
      .photo ul li {
        width: 200px;
        height: 200px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        /* 溢出隐藏 */
        overflow: hidden;
      }
      /* css中序选择器的使用 :nth-child(4n) 表示 一个集合中的4的倍数的li
      只要找到 4的倍数的li，将这些li的右外边距设置为0

      或者 你可以这样写 li:nth-of-type(4n)
      */
      .photo ul li:nth-of-type(4n) {
        margin-right: 0;
      }

      /* 鼠标悬停到图上的时候，我们希望图高亮显示 */
      .photo ul li img {
        width: 100%;
        opacity: 0.85;
        /* 过渡动画 */
        transition: all 0.18s ease-in;
      }

      .photo ul li img:hover {
        transform:scale(1.05);
        opacity: 1;
      }
    </style>

huxiaoxiao.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3漂亮的相册集

使用鼠标的悬停做出漂亮的照片样式：布局部分：<body> <header> <h1>美丽人像图集</h1> </header> <section> <div class="photo"> <ul> <li> <a href=""><img src="img/1.jpg
复制链接

扫一扫