代码改变世界
[登录 · 注册]
  • 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
Copyright 2008-2020 晋ICP备12007731号-1