<!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. Maven设置代理

    很多时候电信的网络对于出国不太稳定,针对一些库下载速度比较慢,所以在使用SSR出国时配置maven使用是一种不错的选择.当然,还有另一种选择,就是使用国内的镜像库. 操作步骤: 1.打开{M2_HOM ...

  2. Go语言：变参函数

    变参函数: 函数中形式参数的数目通常是确定的,在调用的时候要依次传入与形式参数对应的所有实际参数,但是在某些函数的参数个数可以根据实际需要来确定,这就是变参函数. Go语言支持不定长变参,但是要注意不 ...

  3. C#报错"线程间操作无效: 从不是创建控件“XXX”的线程访问它"--解决示例

    C# Winform程序中,使用线程对界面进行更新需要特殊处理,否则会出现异常“线程间操作无效: 从不是创建控件“taskView”的线程访问它.” 在网文“http://www.cnblogs.co ...

  4. 赵雅智_Fragment

    当我们须要动态的多界面切换的时候,就须要将UI元素和Activity融合成一个模块. 在2.3中我们一般通过各种Activity中进行跳转来实现多界面的跳转和单个界面动态改变.在4.0或以上系统中就能 ...

  5. Solaris主机间的信任关系机制

    解决问题: 管理员经常在其他服务器之间登录,是否需要密码切换. 知识点:主机间信任关系.R 命令集 /etc/hosts/equiv 文件 R服务是不加密的,别人可以破解. 主机名 + 用户名. + ...

  6. Hadoop 源码阅读技巧

    http://www.cnblogs.com/xuxm2007/category/388607.html     个人谈谈阅读hadoop源代码的经验.首先,不得不说,hadoop发展到现在这个阶段, ...

  7. 网络通讯框架MINA和XSCOCKET的简单比较

    http://www.blogjava.net/ghostdog/archive/2008/06/10/MinaVsXsocket.html实在无聊,考虑把当前应用的通讯模式由http移植为socke ...

  8. VMware虚拟机下如何安装一个64位的win7系统

    原文地址:http://www.xitongcheng.com/jiaocheng/win7_article_21001.html VMware虚拟机软件可以在一台电脑上运行多个操作系统,一些网友想在 ...

  9. （利用DOM）在新打开的页面点击关闭当前浏览器窗口

    1.在开发过程中我们前端的用户体验中有时候会要求点击一个按钮,关闭当前浏览器窗口,用HTML DOM就可做到 2.注意:本次写法要求在新窗口中关闭.target="_blank" ...

  10. ARM体系结构与编程-5

    GET通经常使用于包括定义常量的源文件. 比如:GET 2440addr.inc 用AREA定义一个段.ENTRY用于指定程序的入口点,END用于告诉汇编器源文件已经结束. 比如: AREA init ...