css 鼠标移入边框填充效果

css 鼠标移入边框填充效果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             a{
 8                 display: block;
 9                 width: 200px;
10                 height: 200px;
11                 overflow: hidden;
12                 padding: 20px;
13             }
14             
15             img{
16                 width: 100%;
17                 height: 100%;
18                 transition: transform 1s;
19                 
20             }
21             
22             img:hover{
23                 transform: scale(1.2);
24             }
25             
26             .test1{
27                 width: 100%;
28                 height: 100%;
29                 border-top: 1px solid;
30                 border-bottom: 1px solid;
31                 transform:rotateY(180deg);
32                 float: left;
33                 -webkit-backface-visibility:hidden;
34                 -moz-backface-visibility:hidden;
35                 -ms-backface-visibility:hidden;
36                 transition: transform 1s;
37             }
38             
39             .test2{
40                 width: 100%;
41                 height: 100%;
42                 border-left: 1px solid;
43                 border-right: 1px solid;
44                 transform:rotateX(180deg);
45                 -webkit-backface-visibility:hidden;
46                 -moz-backface-visibility:hidden;
47                 -ms-backface-visibility:hidden;
48                 transition: transform 1s;
49             }
50             
51             a:hover .test1{
52                 transform:rotateY(0deg);
53             }
54             
55             a:hover .test2{
56                 transform:rotateX(0deg);
57             }
58         </style>
59     </head>
60     
61     <body>
62         
63         <a href="http://www.baidu.com">
64             <div class="test1"></div>
65             <div class="test2"></div>
66         </a>
67     </body>
68 </html>

效果图：

【推广】 阿里云小站-上云优惠聚集地（新老客户同享）更有每天限时秒杀！
【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣！
原文：https://www.cnblogs.com/zouqin/p/5504411.html