css实现动态线框

   image


废话不多说直接上代码


<li class="border">


               <a href="" target="_blank">

                <img src="https://www.ziyimall.com//static/uploads/20200414/031d68d2b17fa57b/1e83e9e547418ca0_Thumb.jpg">

                        <div class="proinfo">

                   <h3>标题啵啵啵啵啵啵啵啵啵啵啵啵</h3>  

                   <p class="dru-fy">

                    <span class="dru-jg">¥69.00</span>

                    <span class="dru-xs">

                        销量 <span class="num">27</span> 笔

                    </span>

                  </p>                  

                        </div>

                       

                    </a>

                    <div class="inner"></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;}


微信扫码咨询
建站咨询
cache
Processed in 0.007045 Second.