项目中好用得css样式

 

效果一：

html：<a href="#">沙盒<i class="triangle"></i><i class="plus"></i></a>

css： a{position：relative；display:block;text-align:center;line-height:60px;}
         .triangle{display:block;width:0;height:0;border-right:15px solid transparent;position:absolute;top:0;left:0;z-  index:2;}
         .plus{display:block;width:0;height:0;border-bottom:15px solid #fff;border-left:15px solid transparent;position:absolute;top:1px;left:1px;z-index:2;}
        a:hover .triangle{border-top:15px solid #fff;}
        a:hover{background:#f38ce3;color:#fff;}

 

  

效果二：

html：<i class="num">4</i>

css：num { position: relative;display: inline-block;width: 16px;height: 16px;line-height: 16px;border: 1px solid #999;font-size: 12px;color: #999;text-align: center;}

        .num:before{content: '';display:block;width:0;height:0;border-right:5px solid transparent;border-top: 5px solid #fff;position:absolute;top:-1px;left:-1px;z-index:2;}
       .num:after{content: '';display:block;width:1px;height:6px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);transform: rotate(45deg);background-color: #666;position:absolute;top:-1px;left:1px;z-index:2;}

效果三：

html：<div class="circleList">
                   <ul>
                          <li><a title="999" href="#" target="_blank"><p>最新进口</p></a></li>                                                                                              <li><a title="999" href="#" target="_blank"><p>最新进口</p></a></li>
                           <div class="line"></div>
                   </ul>                 
            </div>

css：.hotArea ul{position: relative;padding: 12px 9px;max-height: 181px;border: 1px solid #e5e5e5;border-top: 0;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;overflow: hidden;}
.hotArea li{position:relative;overflow: hidden;}
         .hotArea li a{display: block;margin-left: 20px;}
         .hotArea .circleList ul .line{ position:absolute; left:12px; top:27px; width:1px;background-color:#dde1e8;}
         .hotArea li p{display:block;width: 246px;height:32px;line-height:32px;font-size: 15px;color: #353533;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
          .hotArea li:hover p{color: #fa6400;text-decoration: underline;}
          .hotArea li:before{content:"";position:absolute;z-index:3; width:3px; height:3px; background:#fff; border:1px solid #dde1e8; border-radius:50%; -webkit-border-radius:50%;left:1px;top:15px;}
           .hotArea li:hover:before{width:6px; height:6px;background-color: #fd8042;border-color: #fd8042;left: 0;}

js:   if($(".circleList").length > 0){
        $(".circleList ul").each(function(){
            var circleHeight = $(this).height();
            var liHeights = $(".circleList ul li").height();
            var circleHeights = $(this).children(".line").height();
            circleHeights = circleHeight - liHeights;
            $(this).children(".line").css('height',circleHeights);    
        })    
    }

效果四：

html：<span></span>

css：span{display: inline-block;width: 6px;height: 6px;border-radius: 50%;position: relative;margin: 0 7px;background-color: #FFF;}

span:before{box-sizing: border-box; display: inline-block;position: absolute;content: '';width: 14px;height: 14px;left: -4px;top: -4px;border-radius: 50%;border: 2px solid #FA0;box-shadow: 0 0 9px 0 #FA0;background-color: transparent;}

效果五：

html：<img />(左右一直循环摇摆）

css：.fhyx_fhfd_li .bg_img{position: absolute;left: 0;top: 0;width: 100px;-webkit-transition: width .3s ease-in, bottom .3s ease-in, left .3s ease-in;transition: width .3s ease-in, bottom .3s ease-in, left .3s ease-in;transform: rotate(-15deg);transform-origin: center top;animation: scal 0.7s ease-in-out 0s infinite alternate;}
@keyframes scal { 0% {transform: rotate(-15deg);} 100% {transform: rotate(15deg);} }

效果六：

html：<ul> <ul />(只谷歌支持）

css：ul { height: 290px;overflow-y: auto;overflow-x: hidden; position: relative; margin: 13px 14px 0 33px;}
         ul::-webkit-scrollbar {  width: 2px;}
         ul::-webkit-scrollbar-thumb {width: 2px; height: 158px; background: #4d70e2;}