css 鼠标移入边框填充效果

最新推荐文章于 2021-10-19 11:47:07 发布

a466783352

最新推荐文章于 2021-10-19 11:47:07 发布

阅读量789

点赞数

原文链接：http://www.cnblogs.com/zouqin/p/5504411.html

版权

 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>

效果图：

转载于:https://www.cnblogs.com/zouqin/p/5504411.html

a466783352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 鼠标移入边框填充效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 a{ 8 ...
复制链接

扫一扫