css3-文字特效和背景透明

直接上图，需要用CSS3实现这样的效果

1.html部分

html这里需要一个

标签包含
之后每组字都是自己的
之所以是div是需要给每组字限定大小。

<ul>
          <li class = "li_title"><div>公司名称</div><div>区域占有率</div><div>主营产品</div><div>来源</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
          <li class = "li_list"><div>公司名称公司名称公司名称公司名称公司名称</div><div>公司名称</div><div>公司名称</div><div>公司名称</div></li>
        </ul>

2.CSS部分

2.1 li背景

这里的li分为两部分，标题部分和其他行，这里如果用less的话就非常方便，less以后会在less专题中说，这里还是用css

.li_title{
  margin-left: -50px; //内边距向左50
  height: 30px; //每行高30px
  list-style-type : none; //去掉li前面的·
  background-color: rgb(46,154,254,0.6); //设置背景颜色，并且透明度为0.6
  border-radius:10px; //拐角度为10px
}

后面的行无非就是改个颜色

.li_list{
  margin-left: -50px;
  height: 30px;
  margin-top: 15px;
  list-style-type : none;
  background-color: rgb(28,28,28,0.6);
  border-radius:10px;
}

2.2 文字特效

这里的特效就是多余的文字变成…
直接代码讲解吧

ul div{
  color : #FFFFFF; //文字颜色白色
  font-size : 18px; //字体大小18px
  float:left; //文字靠左浮动
  margin-left: 8%; //左边距为8%，也就是每个字之间的间距
  width:110px;  //规定div大小，也就是文字框大小（主要）
  white-space:nowrap; //规定文字不能换行（主要）
  overflow:hidden;  //规定多余的文字隐藏（主要）
  text-overflow:ellipsis; //规定文字超出的话···（主要）
}

这些之后图片的效果就回显现

3.左侧按钮特效

直接上图，需要用CSS3实现这样的效果
如图所示
要实现这个效果首先要在左面定义一个

3.1左侧div_html

<div class = "menu">
       <ul>
         <li value = "reaches">行业上下游</li>
         <li class="menu_select" value = "xiehui">协会理事会</li>
         <li class="menu_select" value = "gongxu">供需平台</li>
         <li class="menu_select" value = "shejiao">社交平台</li>
         <li class="menu_select" value = "qita">其他</li>
      </ul>
</div>

3.2.左侧CSS样式

首先是menu的样式

.menu{
  width: 13%;  //定义宽度
  height: 736px; //定义高度
  float:left; //浮动到左侧
  transform:skew(0deg,20deg); //敲黑板划重点，倾斜，两个参数，这里是沿着x轴向下倾斜20度
}

之后设定ul样式，这个样式没有什么好说的

.menu ul {
  float:left;
  margin-top: 25%;
  margin-left: -20%;
}

再之后设置li样式，划重点

.menu li {
  width: 100%; //li宽度
  height: 100px; //高度
  margin-top: 5%; //内置上边距
  color : #FFFFFF; //颜色（字体）
  font-size : 20px; //字体大小
  border:1px solid #ffffff; //边界线粗细为1px。边界线颜色为白色
  list-style-type : none; //不显示·
  float:left; //左浮动
  display: flex; //（划重点）用flex布局，这样设置里面字居中
  align-items:center; // 上下居中
  justify-content: center;// 左右居中
  cursor: pointer; //鼠标经过变成手指
}

未被选择的li需要一个透明的背景色，如同前面一样，直接上代码

1
2
3

.menu_select{
  background-color: rgb(110,110,110,0.3);
}

3.3实现点击切换效果js

循环ul的children，如果和点击的li相同则删除menu_select样式，否则添加menu_select样式

$(".menu li").on('click', function() {
      for (let child of $(".menu ul").children()) {
        if(child.innerHTML != this.innerHTML){
          $(child).addClass("menu_select");
          $("#"+child.attributes.value.value).hide()
        }
        else{
          $(child).removeClass("menu_select");
          $("#"+child.attributes.value.value).show()
        }
      }
    })