您的位置：首页 > Web前端 > CSS

css 鼠标移入边框填充效果

2016-05-18 10:54 591 查看

原文链接：https://www.geek-share.com/detail/2674540041.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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航