<!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. Cesium热力图实现

    转自原文 Cesium热力图实现 生成热力图的算法我是用的一个热力图插件 heatmap.js.   heatmap中热力图生成原理: heatmap中首先会根据输入的渐进色参数,在内部生成一个0-2 ...

  2. n个平面把空间最多分成几个部分?

    题目: n个平面把空间最多分成几个部分? 解答: 1条直线可以把平面分成2部分,2条直线最多可以把平面分成4部分, 3条直线最多可以把平面分成几部分,4条直线呢?你能不能想出n条直线最多可以把平面分成 ...

  3. 【bootstrap】bootstrap中的tooltip的使用

    先看看效果图:[当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息] 这样的效果,怎么实现呢? 很简单 1.引入jQuery.js和bootstrap的js和css 2.给想要有t ...

  4. 转： 浅析Fusion-IO和Intel SSD

    from: http://alanwu.blog.51cto.com/3652632/865235 标签:SSD 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否 ...

  5. python（28）- 面向对象练习Ⅱ

    题目一:总结 1.什么是绑定到对象的方法,如何定义,如何调用,给谁用?有什么特性? 类内定义的函数,不经装饰器装饰,被实例化对象调用,会默认传入一个self参数,对象将会传递给self: 定义方式比较 ...

  6. Linux(centos 6.5) 调用java脚本以及定时运行的脚本实例及配置文件具体解释

    Linux(centos 6.5) 调用java脚本以及定时运行的脚本实例 一.调用java程序脚本(默认已经搭建好了Java环境) 1.jdk 安装路径 /usr/jdk/jdk1.7/-- 2.j ...

  7. Python--常用模块部分

    模块 pip install #模块名称 #安装模块 #导入模块 from collections import namedtuple collections模块 提供了几个额外的数据类型: Coun ...

  8. ajax短信验证码-mvc

    <script type="text/javascript"> function SendMessage() { var phoneNumberInput = docu ...

  9. smartUpload注意过程

    操作的过程中一定要注意的几个方面:       1.将smartUpload.jar拷贝到tomcat/lib以及项目的lib下面,最好是只多不少!       2.因为上传的文件一般都很大,所以应该 ...

  10. 针对基于Phison(群联)U盘的BadUSB攻击

    修改U盘固件使之在插入电脑时能执行键盘指令.原文和源码在此,粗略翻译了一下.https://github.com/adamcaudill/Psychson 其实还有类似的成品卖,叫做USB Rubbe ...