css图片手风琴效果（鼠标悬停）

最新推荐文章于 2022-07-01 18:36:25 发布

可爱又迷人的反派少女

最新推荐文章于 2022-07-01 18:36:25 发布

阅读量1k

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_48291770/article/details/107533082

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

将图片向左浮动依次排序

效果图
在这里插入图片描述

body部分
利用无序列表排列图片

<!-- 无序列表 -->
    <ul class="box">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
    </ul>

css样式

去除无序列表的小圆点和内外边距

 ul{  /*去除无序列表的小圆点 外边距 内边距*/
          list-style: none;
          margin: 0px;
          padding: 0px;
      }

图片排列

li{
          width: 120px;           /*图片向左浮动每张宽度为120*/
          float: left;
          transition: 1s linear;
      }

鼠标悬停效果

 li:hover{
          width: 400px;   /*鼠标悬停时，图片展开宽度为400*/
      }

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      ul{  /*去除无序列表的小圆点 外边距 内边距*/
          list-style: none;
          margin: 0px;
          padding: 0px;
      }
      .box{
          width: 600px;
          height: 250px;
          /* border: solid; */
          overflow: hidden;  /*图片溢出盒子的部分隐藏*/
      }
      li{
          width: 120px;           /*图片向左浮动每张宽度为120*/
          float: left;
          transition: 1s linear;
      }
      li:hover{
          width: 400px;   /*鼠标悬停时，图片展开宽度为400*/
      }
      /*除..之外*/
      .box li:not(:hover){    /*除了鼠标悬停的图片之外，其他的图片宽度为50*/
        width: 50px; 
      }
  </style>
</head>
<body>
    <!-- 无序列表 -->
    <ul class="box">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
    </ul>
</body>
</html>

float 浮动(布局方式之一)

left 向左浮动
right 向右浮动
none 默认值

transition 过渡动画

transition:属性  过渡需要的时间  [曲线速度  延迟时间];

属性可以是css的各类属性，还可以用all表示所有属性

:hover 鼠标悬停

（过渡动画的触发条件）

/* 鼠标悬停 添加背景颜色 */
.box:hover{
    background-color: hotpink;
}

可爱又迷人的反派少女

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录