<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             a{

                 display: block;

                 width: 200px;

                 height: 200px;

                 overflow: hidden;

                 padding: 20px;

             }

             img{

                 width: 100%;

                 height: 100%;

                 transition: transform 1s;

             }

             img:hover{

                 transform: scale(1.2);

             }

             .test1{

                 width: 100%;

                 height: 100%;

                 border-top: 1px solid;

                 border-bottom: 1px solid;

                 transform:rotateY(180deg);

                 float: left;

                 -webkit-backface-visibility:hidden;

                 -moz-backface-visibility:hidden;

                 -ms-backface-visibility:hidden;

                 transition: transform 1s;

             }

             .test2{

                 width: 100%;

                 height: 100%;

                 border-left: 1px solid;

                 border-right: 1px solid;

                 transform:rotateX(180deg);

                 -webkit-backface-visibility:hidden;

                 -moz-backface-visibility:hidden;

                 -ms-backface-visibility:hidden;

                 transition: transform 1s;

             }

             a:hover .test1{

                 transform:rotateY(0deg);

             }

             a:hover .test2{

                 transform:rotateX(0deg);

             }

         </style>

     </head>

     <body>

         <a href="http://www.baidu.com">

             <div class="test1"></div>

             <div class="test2"></div>

         </a>

     </body>

 </html>

效果图：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAR4AAAEDCAIAAABs4/zEAAAEt0lEQVR4nO3UwWklMBQEQcfhvByVg9amsP/waDNUoQCEmNbXAw581ReATdKCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9KCE9J6772f798/fuoX4mPSghMfpOXv5MjktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0ZuclrToTU5LWvQmpyUtepPTkha9yWlJi97ktKRFb3Ja0qI3OS1p0Zuc1gdpAf9PWnBCWnBCWu+99/P9+8dP/UJ8TFpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpwQlpw4h892u57q9eOPAAAAABJRU5ErkJggg==" alt="" />

css 鼠标移入边框填充效果的更多相关文章

  1. 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

    这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...

  2. 使用纯css鼠标移入效果,炫酷的旋转正方体

    首先我们需要创建几个盒子 </div> <div class="wrap"> <div class="cube"> < ...

  3. React实现了一个鼠标移入的菜单栏效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title> ...

  4. CSS鼠标效果手型效果

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  5. html css鼠标样式，鼠标形状

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  6. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  7. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  8. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  9. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

随机推荐

  1. 【bootstrap】Bootstrap Notify的使用步骤

    Bootstrap Notify说明文档:http://bootstrap-notify.remabledesigns.com/ Bootstrap Notify的GitHub地址:https://g ...

  2. Android基础新手教程——3.7 AnsyncTask异步任务

    Android基础新手教程--3.7 AnsyncTask异步任务 标签(空格分隔): Android基础新手教程 本节引言: 本节给大家带来的是Android给我们提供的一个轻量级的用于处理异步任务 ...

  3. dom4j的xpath查找xml的指定节点

    递归遍历所有节点http://blog.csdn.net/sidihuo/article/details/47318723 获取Document SAXReader saxReader = new S ...

  4. C 标准库 - <signal.h>

    C 标准库 - <signal.h> 简介 signal.h 头文件定义了一个变量类型 sig_atomic_t.两个函数调用和一些宏来处理程序执行期间报告的不同信号. 库变量 下面是头文 ...

  5. 需要配置执行path？no

    下面的代码以管理员权限运行即可,保存为bat 2018/2/6(basic) - 初始化版本 @echo off :continue echo 输入exit退出 set /p My_PATH=请输入要 ...

  6. vue2.0 + vux （三）MySettings 页

    1.MySettings.vue <!-- 我的设置 --> <template> <div> <img class="img_1" sr ...

  7. Solaris 下解决上网问题以及远程登录问题

    解决乱码问题 参考文章 http://www.jb51.net/os/Solaris/1656.html solaris 显示乱码的解决方法 现象: 利用命令 : LANG=zh; export LA ...

  8. MySQL：unknown variable &#39;master-host=masterIP&#39; [ERROR] Aborting

    <span style="font-size:18px;">120401 15:45:44 [ERROR] C:\Program Files\MySQL\MySQL S ...

  9. Linux上mysql修改密码

    http://www.cnblogs.com/wangjiangze/archive/2011/03/03/1970105.html   MySQL中修改密码及访问限制设置详解

  10. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...