css完成动态性线框

摘要: css完成动态性线框 阅读文章量:3 公布于: 20-06-10 15:41 空话很少说立即上编码 li > a href= target= _blank img src= /static/uploads//031d68d2b17fa57b/1e83e9e547418ca0_Thumb.jpg ...

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

   image


空话很少说立即上编码


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;




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网页设计模板图片