仿海棠学院列表效果-白红宇

仿海棠学院列表效果

阅读量：5137 次

发布时间：2019-06-13

本文共 3062 字，大约阅读时间需要 10 分钟。

    
              
      
          
       我是标题
    
               
                    
                         
          放下盲目的自信，去找一位好教练            
         
        
        
                    
         
                          放下盲目的自信，去找一位好教练            
         
        
        
                    
         
                          放下盲目的自信，去找一位好教练            
         
        
        
                    
         
                          放下盲目的自信，去找一位好教练

html

@import "public.css";.show-list{
        width:400px;    margin:20px auto;    border-radius:10px;    background:#3a404d;}.show-list h1{
        padding:10px;    color:#fff;    font-size: 22px;}.show-list ul{
        counter-reset: show-list;/*计数器*/}.show-list li{
        position:relative;    width:100%;    font-size:16px;    counter-increment: item;/*计数器*/    color:#fff;    background: green;    cursor: pointer;    z-index:100;    transition:all 0.3s linear}.show-list li:last-child{
        border-radius:0 0 10px 10px;}.show-list li div{
        padding:20px 50px;}.show-list li:before{
        content: counter(item)/*"."*/;/*计数器*/    display: block;    position:absolute;    left:20px;    top:50%;    margin-top:-10px;    width:20px;    height:20px;    line-height:20px;    text-align:center;    border-radius:50%;    color:#0b391a;    background:#fff;}.show-list li:after{
        content:">";    position:absolute;    right:16px;    top:50%;    margin-top:-5px;    width:10px;    height:10px;    line-height:10px;    text-align:center;    color:#0b391a;}.show-list li:hover{
        transform:scaleX(1.03)}.show-list li div:before,.show-list li div:after{
        position:absolute;    z-index:10;    content: "";    width:0;    height:0;}.show-list li:nth-child(1) div:before,.show-list li:nth-child(1) div:after{
        bottom: -10px;    border-top: 10px solid green;}.show-list li:nth-child(2) div:before,.show-list li:nth-child(2) div:after{
        bottom:-6px;    border-top: 6px solid green;}.show-list li:nth-child(3) div:before,.show-list li:nth-child(3) div:after{
        bottom:-2px;    border-top: 2px solid green;}.show-list li:nth-child(4) div:before,.show-list li:nth-child(4) div:after{
        top:-6px;    border-bottom: 6px solid green;}.show-list li:nth-child(1) div:before{
        left: 0;    border-left: 10px solid transparent;}.show-list li:nth-child(1) div:after{
        right: 0;    border-right: 10px solid transparent;}.show-list li:nth-child(2) div:before{
        left: 0;    border-left: 6px solid transparent;}.show-list li:nth-child(2) div:after{
        right: 0;    border-right: 6px solid transparent;}.show-list li:nth-child(3) div:before{
        left: 0;    border-left: 6px solid transparent;}.show-list li:nth-child(3) div:after{
        right: 0;    border-right: 6px solid transparent;}.show-list li:nth-child(4) div:before{
        left: 0;    border-left: 6px solid transparent;}.show-list li:nth-child(4) div:after{
        right: 0;    border-right: 6px solid transparent;}