我的第一次（滑稽）SCSS之旅——实现一下简单的手风琴式的图片展示

最新推荐文章于 2024-04-30 09:57:08 发布

goudan蒻

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量243

点赞数 4

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

本文链接：https://blog.csdn.net/lspdd/article/details/120598520

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上个博客写了一下SASS的一些配置

我现在来试试这个东西
首先这个东西跟less比，功能只会强大不会比less
$ 可以定义变量，可以在其中使用
& 代表当前元素的父节点
嵌套里面继续选择元素，代表是当前代码块（也就是一对花括号包括的一部分代码）的元素节点中的字节点钟选择新的节点，这点是跟less相似的
那么就可以在代码块中有这种操作&::after 还有 &:hover 代表的都是当前代码块元素的一些新的特点悬停啊之类的
那么我实现个简单的手风琴式的一个图片展示

思路如下

以横向的列表展示图片，不排除有大小不一的情况出现，也就是溢出的不展示
然后固定大小展示，显示图片中间的内容
不被悬停只展示一部分
然后悬停放大
有慢慢放大的动画
transtion很容易想到了，这是个重要点吧
标题我想展示到中间并且大小要大浮动到上面，可以想到z-index
放大展示后要有阴影表示选中嘛

代码

看到以上思路大概你们应该会有个大致代码的想法（包括我）
于是我现在得到了如下的scss代码

.accordion-container{
  overflow: hidden;//溢出的不展示
  display: flex;//伸缩盒子展示
  justify-content: flex-start;//以伸缩开始的地方对齐
  align-items: flex-start;
  .accordion-item{
    list-style: none;//取消列表默认样式
    height: 500px;//高度
    transition: width 0.5s;//动画嘛
    background-size: cover;
    background-repeat:no-repeat;//可以百度，比我注释的清楚吧？
    background-position: center center;
    position: relative;//相对位置
    display: flex;
    justify-content: center;
    align-items: center;
    &:not(:hover){
      width: 20%;//item不被悬停的时候只展示20%宽度
    }
    &:hover{
      width: 800px;//悬停的时候800px
      &::after{
        opacity: 1;
      }
    }
    &::after{//为后面添加元素背景也就是添加阴影嘛
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;//绝对定位
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,.4);//阴影
      z-index: 1;//跟图片一个层级
      opacity: 0;
      transition: opacity 0.5s;
    }
    .accordion-title{//标题
      color:#fff;
      font-size: 18px;
      z-index: 2;
    }
  }
}

生成的css文件代码

.accordion-container {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; }
  .accordion-container .accordion-item {
    list-style: none;
    height: 500px;
    transition: width 0.5s;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
    .accordion-container .accordion-item:not(:hover) {
      width: 20%; }
    .accordion-container .accordion-item:hover {
      width: 800px; }
      .accordion-container .accordion-item:hover::after {
        opacity: 1; }
    .accordion-container .accordion-item::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s; }
    .accordion-container .accordion-item .accordion-title {
      color: #fff;
      font-size: 18px;
      z-index: 2; }

/*# sourceMappingURL=bg-style.css.map */

效果展示

总结

有时候思路其实比代码能力更重要，多找灵感和素材总没错
以战养战
再见

HTML代码

我说忘了什么
给你们html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bg-style.css" type="text/css">
</head>
<body>
    <ul class="accordion-container">
        <li class="accordion-item" style="background-image: url(bg1.jpg);">
            <p class="accordion-title">老婆一号</p>
        </li>
        <li class="accordion-item" style="background-image: url(bg2.jpg);">
            <p class="accordion-title">老婆二号</p>
        </li>
        <li class="accordion-item" style="background-image: url(bg3.jpg);">
            <p class="accordion-title">老婆三号</p>
        </li>
        <li class="accordion-item" style="background-image: url(bg4.jpg);">
            <p class="accordion-title">老婆四号</p>
        </li>
        <li class="accordion-item" style="background-image: url(bg5.jpg);">
            <p class="accordion-title">老婆五号</p>
        </li>
    </ul>
</body>
</html>

goudan蒻

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一次（滑稽）SCSS之旅——实现一下简单的手风琴式的图片展示

上个博客写了一下SASS的一些配置我现在来试试这个东西首先这个东西跟less比，功能只会强大不会比less$ 可以定义变量，可以在其中使用& 代表当前元素的父节点嵌套里面继续选择元素，代表是当前代码块（也就是一对花括号包括的一部分代码）的元素节点中的字节点钟选择新的节点，这点是跟less相似的那么就可以在代码块中有这种操作&::after 还有 &:hover 代表的都是当前代码块元素的一些新的特点悬停啊之类的那么我实现个简单的手风琴式的一个图片展示思路如下以横向的
复制链接

扫一扫