CSS3漂亮的相册集

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

布局部分:

<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>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值