项目中好用得css样式

梦里梦外; 2023-02-14 13:26 10阅读 0赞

效果一：

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;\}

![2020060310521975.png][]  ![20200603105301864.png][]

效果二：

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;\}

![20200603145714757.png][]

效果三：

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);      
        \})      
    \}

![20200603153625431.png][]

效果四：

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;\}

![20200604171214614.png][]

效果五：

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);\} \}

![20200612101711862.png][]

效果六：

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;\}

![20200612111609698.png][]

[2020060310521975.png]: https://img-blog.csdnimg.cn/2020060310521975.png
[20200603105301864.png]: https://img-blog.csdnimg.cn/20200603105301864.png
[20200603145714757.png]: https://img-blog.csdnimg.cn/20200603145714757.png
[20200603153625431.png]: https://img-blog.csdnimg.cn/20200603153625431.png
[20200604171214614.png]: https://img-blog.csdnimg.cn/20200604171214614.png
[20200612101711862.png]: https://img-blog.csdnimg.cn/20200612101711862.png
[20200612111609698.png]: https://img-blog.csdnimg.cn/20200612111609698.png