纯css写手风琴

大家好，我是一个弟弟的弟弟的弟弟的弟弟的弟弟级别的前端，弟弟到什么级别呢？弟弟到我都不好意思说我名字的级别。怕以后有人骂我。
以前没有写过这类的东西以前就是看别的大牛写，然后“wc，npnpnpnpnp”。今天开始在工作中遇到的难题和踩过的坑我有时间都会尽量在这里分享一下，指点真的是不敢当，因为当下社会各行各业大佬如云，咱IT行业就更是阴云密布。一方面给刚刚入坑的小白做个参考，另一方面垃圾的自己做一个记录做过的东西我不会让它再卡住我一遍，遇到的bug我也不要再次遇到，所以有了开始写博客的想法。争取早日变成一个牛13点儿的垃圾

关于手风琴怎么说呢，可能对于一个css稍微弱点儿的前端来说确实有点难搞（譬如:我，其实我css和js都垃圾）。硬生生是把css写成了js一样的东西，颠覆了我以前的一个观点“ 布局就是画画，不需要脑子，布就完了 ”。因为以前手风琴啊、轮播啊、再低级点儿写蒙板弹出框啊什么的，就是二话不说Elmt —> Import完活、什么？不是Vue的？React的？Antd —>Import完活。从没手写过，但这次写个手风琴确实是教育了我一通，仅限借鉴和吐槽哈~

先上效果

OK我在这里加了些什么呢，除了五个图片主角以外，还附加了它每个的title、内容、一条小渐变线、和两个按钮（ 查看更多和通过不同颜色的大赛/活动 ）

首先咱们写手风琴的核心思路就是，当我鼠标移入（或点击，看需求）的时候，当前鼠标移入的图片拉宽至完全大小，其他的图片缩宽至同样的窄宽，总结的再简洁一点就是“鼠标碰哪个哪个放大，没碰就缩小”。这就是我理解的手风琴写法的核心思想。但其实你图片拉宽缩窄是给用户看的，给屏幕对面的人一个交互。

从效果图里可以看出来我还加了：文字超出部分…隐藏、线性渐变色、三元运算符切换class
也是值得一提的小技巧如果有需要也可以在代码里刻意看一下，虽然我知道只有我这么垃圾的人才会这么认为

那么then 上代码

我先声明一下，我上的代码是我工作中完全写完的成品，所以很多细节我都必须扣到位。真正跟手风琴效果有关系的只占全部代码的60% 根据需求自己改样式，我说这些为了防止有些人不看文字和图片直接找代码然后吐槽代码太多

dom部分就很少了，就一个ul，for循环出来就没了

 <div class="ccy-born-latest">
    <p class="title_one">最新动态</p>
    <p class="title_two">资源聚集，推动科技成果转移转化</p>
    <ul class="jean">
      <li class="jean_li" v-for="(wird,index) in jeanarr" :key="index">
        
              <img :src='wird.icon' class="jean_background" alt />
              <p class="jean_active" :class="wird.type=='大赛'?'active_blue':'active_purple'">{{wird.type}}</p>
              <p class="jean_title">{{wird.title}}</p>
              <p class="jean_line"></p>
              <p class="jean_subject">{{wird.subject}}</p>
         
              <p class="jean_subjecter" @click = "goactive(wird.id)">查看更多</p>
              <button class="jean_see">查看更多</button>
  
       
      </li>
    </ul>
  </div>

配角一般的存在哈~

然后上js

（别咬文嚼字说我标题写纯css，我说的是效果，你要不想要这部分js也可以，你写死在dom里也完全no毛病，我说的纯css意思是没有任何鼠标移入事件、鼠标移出事件、没有任何watch监听）

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
       jeanarr: [
        {
          icon: require("@/assets/lime_02.png"),
          title: "AR实景邀请 大赛",
          subject: "绿色入驻通道资质申报服务投融资服上行京东服务",
          type:'cs',
          id:'1'
        },
        {
          icon:require("@/assets/lime_03.png"),
          title: "AI超级竞赛、随时购",
          subject: "创新意识孵化技术认知提升、技术能力、赋予技术人才培养 ",
          type:'pt',
          id:'1'
        },
        {
          icon: require("@/assets/lime_04.png"),
          title: "实况积极创新 大赛  ",
          subject: "入园补贴扶持平台、补贴资源包企业补贴上云",
          type:'cs',
          id:'1'
        },
        {
          icon: require("@/assets/lime_05.png"),
          title: "AR实景购物 随时购",
          subject: "创新技术基础创新、能力开放、创新应用、共享",
          type:'cs',
          id:'1'
        },
        {
          icon: require("@/assets/lime_01.png"),
          title: "南京将举办2019年世界半导体大会",
          subject:"基于人工智能技术，帮助企业通过机器智能过滤产品内违法违规的UGC内容",
          type:'pt',
          id:'1'
        }
      ]
    };
  },
  created() {
	for(var i = 0 ; i<this.jeanarr.length;i++){
                      if(this.jeanarr[i].type == 'cs'){
                          this.jeanarr[i].type = '大赛'
                      }else{
                         this.jeanarr[i].type = '活动' 
                      }
                  }
  }
};

图片路径自己改吭~
然后上css部分

 .ccy-born-latest {
  width: 100%;
  height: auto;
  position: relative;
  text-align: center;
  background:white;
  margin-top:-20px;
}
.title_one {
  font-size: 30px;
  color: #3E3E3E;
  letter-spacing: 2px;
}
.title_two {
  font-size: 20px;
  color: #686868;
  letter-spacing: 1px;
  margin-top: 10px;
}

.ccy-born-latest .jean_subject{
  width:410px;
  height:40px;
  color: rgb(226, 226, 226);
  border-radius:3px;
  position: absolute;
  left: 40px;
  top: 527px;
  z-index: 1;
  font-size: 0.9rem;
  letter-spacing: 3px;
  line-height: 28px;
  text-align: left;
}
.ccy-born-latest .jean_subjecter{
    width: 5.5rem;
    height: 2rem;
    color: white;
    background: linear-gradient(270deg,rgba(153,82,180,1) 0%,rgba(54,111,251,1) 100%);
    border-radius: 3px;
    position: absolute;
    left: 40px;
    top: 640px;
    z-index: 2;
    font-size: 0.9rem;
    letter-spacing: 3px;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
}
.ccy-born-latest .jean_line{
  width:80px;
  height:3px;
  position: absolute;
  background:linear-gradient(270deg,rgba(153,82,180,1) 0%,rgba(54,111,251,1) 100%);
  left: 40px;
  top: 490px;
  z-index: 2;
  
}
.ccy-born-latest .jean_masker{
    width: 32rem;
    height: 22rem;
    background: black;
    position: absolute;
    opacity: .3;
    top: 0;
    right: 0;
    z-index: 1;
}
.ccy-born-latest  .jean_title{
  width: 80px;
  height:90px;
  color: white;
  border-radius:3px;
  position: absolute;
  left: 30px;
  top: 15rem;
  z-index: 3;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 30px;
  text-align: left;
  font-weight:600;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  }

.ccy-born-latest .active_purple{
  width:4rem;
  height:1.9rem;
  color: white;
  opacity: 0.9;
  border-radius:3px;
  position: absolute;
  right: 1.3rem;
  top: 1.3rem;
  z-index: 3;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.9rem;
  opacity: 0;
  background:#B56CF9;
}
.ccy-born-latest .active_blue{
  width:4rem;
  height:1.9rem;
  color: white;
  opacity: 0.9;
  border-radius:3px;
  position: absolute;
  right: 1.3rem;
  top: 1.3rem;
  z-index: 3;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.9rem;
  opacity: 0;
  background:#3b6ef8;
}

.ccy-born-latest .jean {
  width: 63rem;
  height: 22rem;
  margin: 30px auto;
  overflow: hidden;
}
.ccy-born-latest .jean li {
  width: 12.3%;
  height:22rem;
  float: left;
  transition: all 0.8s;
  position: relative;
  list-style: none;
}
.ccy-born-latest .jean_background {
  width: 32rem;
  height:22rem;
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  }

.ccy-born-latest .jean:hover li {
  width: 12.3%;
}
.ccy-born-latest .jean li:hover {
  width: 32rem;
}
.ccy-born-latest .jean li:hover .jean_title{
    width: 21rem;
    height:2rem;
    font-size:1.1rem;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    animation:titlemove 0.5s infinite;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
} 
@keyframes titlemove
{
  from {top: 13.5rem;}
  to {
      top:10.5rem;
      left:1.7rem;}
}
.ccy-born-latest .jean li:hover .jean_line{
    animation:linemove 0.5s infinite;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
} 
@keyframes linemove
{
  from {top: 520px;}
  to {top: 13.5rem;left:1.7rem;}
}
.ccy-born-latest .jean li:hover .jean_subject{
    animation:subjectmove 0.5s infinite;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
} 
@keyframes subjectmove
{
  from {top: 640px;}
  to {top:14.5rem; left:1.7rem;}
}
.ccy-born-latest .jean li:hover .jean_subjecter{
    animation:subjectermove 0.5s infinite;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
} 
@keyframes subjectermove
{
  from {top: 740px;}
  to {top:18.5rem; left:1.7rem;}
}
.ccy-born-latest .jean li:hover .jean_active{
    animation:activemove 0.5s infinite;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
} 
@keyframes activemove
{
  from {opacity:0;}
  to {opacity:1;}
}

.ccy-born-latest .jean_li:nth-child(5) .jean_title{
  width: 400px;
  top: 10.5rem;
  left:1.7rem;
  font-size:1.1rem;
}
.ccy-born-latest .jean_li:nth-child(5) .jean_line{
  top: 13.5rem;left:1.7rem;
}
.ccy-born-latest .jean_li:nth-child(5) .jean_subject{
  top:14.5rem; left:1.7rem;
}
.ccy-born-latest .jean_li:nth-child(5) .jean_subjecter{
  top:18.5rem; left:1.7rem;
}
.ccy-born-latest .jean_li:nth-child(5) .jean_active{
  opacity: 1;
}
.ccy-born-latest .jean_li:nth-child(5):hover {
   width: 31.5rem;
}
.ccy-born-latest .jean_li:nth-child(5) {
   width: 31.5rem;
}

.jean_li:nth-child(1):hover ~ .jean_li:nth-child(5) .jean_title,
.jean_li:nth-child(2):hover ~ .jean_li:nth-child(5) .jean_title,
.jean_li:nth-child(3):hover ~ .jean_li:nth-child(5) .jean_title,
.jean_li:nth-child(4):hover ~ .jean_li:nth-child(5) .jean_title{
   width: 90px;
   top: 15rem;  
   font-size:17px;
}
.jean_li:nth-child(1):hover ~ .jean_li:nth-child(5) .jean_line,
.jean_li:nth-child(2):hover ~ .jean_li:nth-child(5) .jean_line,
.jean_li:nth-child(3):hover ~ .jean_li:nth-child(5) .jean_line,
.jean_li:nth-child(4):hover ~ .jean_li:nth-child(5) .jean_line{
   top: 600px;  
}
.jean_li:nth-child(1):hover ~ .jean_li:nth-child(5) .jean_subject,
.jean_li:nth-child(2):hover ~ .jean_li:nth-child(5) .jean_subject,
.jean_li:nth-child(3):hover ~ .jean_li:nth-child(5) .jean_subject,
.jean_li:nth-child(4):hover ~ .jean_li:nth-child(5) .jean_subject{
   top: 600px;  
}
.jean_li:nth-child(1):hover ~ .jean_li:nth-child(5) .jean_subjecter,
.jean_li:nth-child(2):hover ~ .jean_li:nth-child(5) .jean_subjecter,
.jean_li:nth-child(3):hover ~ .jean_li:nth-child(5) .jean_subjecter,
.jean_li:nth-child(4):hover ~ .jean_li:nth-child(5) .jean_subjecter{
   top: 600px;  
}
.jean_li:nth-child(1):hover ~ .jean_li:nth-child(5) .jean_active,
.jean_li:nth-child(2):hover ~ .jean_li:nth-child(5) .jean_active,
.jean_li:nth-child(3):hover ~ .jean_li:nth-child(5) .jean_active,
.jean_li:nth-child(4):hover ~ .jean_li:nth-child(5) .jean_active{
   display: none; 
}

现在是右侧默认打开的，想要左侧默认打开只需要把jean li 里的float：left改成right然后把图片从left:0 改成 right:0就可以了

我承认代码写的属实是low了点，但咱也是技术有限，也在不断努力不断进步，起码效果是完全可以实现的。

这个手风琴稍微需要思考点儿的地方在哪儿呢，就是默认打开的图片。咱们可以通过效果图看到当我鼠标不移入任何一张图的时候是最右侧的图展开的，所以它和其他四个的样式有些不一样。那么这张图咱们就要单独设置样式，移入移出时的效果。以及当我鼠标移入其他图片的时候第一个图片的样式

看似交互是在让图片变大变小，其实我在这操作的并不是img，而是li。因为我还有其他要操作的元素（tile、内容subject和两个button），如果你们只要效果那么直接hover:img也完全OK。所有的li的默认宽度都是12.5%。为什么是12.5%呢。因为有一张图时占50%的，其余的四张图为了好看也要挤成50%，那么每个就是12.5%。然而图片并不是宽高100%，图片就给个固定样式，该多大多大，超出的部分会因为li的左浮动而盖住，当我们鼠标移入的时候li打开，图片被盖住的部分也就自然而然的展示出来了。

第一次写，代码写的不好，文章写的不好，大家多多包涵。抱拳儿了