css完成动态性线框

2021-04-08 03:15

css完成动态性线框 阅读文章量：3 公布于: 20-06-10 15:41

   

空话很少说立即上编码

li >

                a href= target= _blank

                img src= /static/uploads//031d68d2b17fa57b/1e83e9e547418ca0_Thumb.jpg

                        div >

                    h3 题目啵啵啵啵啵啵啵啵啵啵啵啵 /h3  

                    p >

                    span >

                    span >

                        销售量 span >

                    /span

                  /p                  

                        /div

                       

                    /a

                    div >

                /li

/* 动态性线框*/

.border position: relative;

/*.border .inner position: absolute;top: 0;left: 0;width: 100%;height: 100%; */

.border:before,.border:after,.border .inner:before,.border .inner:after background-color: #f42f2f;position: absolute;content: display: block;-webkit-transition: -webkit-transform .5s;transition: -webkit-transform .5s;transition: transform .5s;transition: transform .5s,-webkit-transform .5s;

.border:before,.border:after left: 0;width: 100%;height: 1px;-webkit-transform: scaleX(0);transform: scaleX(0);

.border:before top: 0; -webkit-transform-origin: right center;transform-origin: right center;

.border:after bottom: 0;-webkit-transform-origin: left center;transform-origin: left center;

.border .inner:before,.border .inner:after top: 0;width: 1px;height: 100%;-webkit-transform: scaleY(0);transform: scaleY(0);

.border .inner:before left: 0;

.border .inner:after right: 0;

.border:hover:before,.border:hover:after -webkit-transform: scaleX(1);transform: scaleX(1);

.border:hover .inner:before,.border:hover .inner:after -webkit-transform: scaleY(1);transform: scaleY(1);

.border .inner:hover:before,.border .inner:hover:after -webkit-transform: scaleY(1);transform: scaleY(1);

.border .inner:before -webkit-transform-origin: top center;transform-origin: top center;

.border .inner:after -webkit-transform-origin: bottom center;transform-origin: bottom center;

.border:hover .inner:before -webkit-transform-origin: bottom center;transform-origin: bottom center;

.border:hover .inner:after -webkit-transform-origin: top center;transform-origin: top center;

.border:hover:before -webkit-transform-origin: left center;transform-origin: left center;

.border:hover:after -webkit-transform-origin: right center;transform-origin: right center;