<!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. -[__NSCFString longValue]: unrecognized selector sent to instance

    You can use NSString methods intValue longLongValue. 这个使用longvalue会crash报上面的错误

  2. 【spring boot】在Spring mvc中controller中可以拿到对象信息，但是返回给前台却是什么也没有，解决方案

    如图所示: 最后: 问题解决: 这个原因是因为,User类并未给字段提供get/set方法,所以给前台传递过去的值是空的. 解决方案: 为User类添lombok的注解@Data,为实体类提供get/ ...

  3. iOS UI08_TableView界面传值

    实现两个界面之间内容的传递 // // MainViewController.m // UI08_TableView界面传值 // // Created by dllo on 15/8/7. // C ...

  4. Solidworks输出Autocad的DWG格式乱码怎么办

    Solidworks输出DWG会有很多问题,如果没必要就别这么做,比如你只是想要打印图纸,Solidworks也可以直接打印,而且很方便,不需要转成DWG再打印,如果对方确实需要DWG格式的图纸,你只 ...

  5. windown vs2012 编译ffplay

    自己写的播放器播放有些文件出现问题,但ffplay播放都很正常,为方便调试,将ffplay.c编译成可执行文件. 一. 环境搭建 环境搭建前面已经有文章介绍,没有特殊的地方,不再赘述. 二.修改con ...

  6. VS中 build,rebuild,clean

    一般来说Rebuild=99%*(Clean+Build),效果在非常小的可能性下会不同,一般可以忽略. Rebuild是对Solution下的所有项目,逐个进行 Clean+Build.不论文件更改 ...

  7. vim 宏的使用

    1. 基本使用 q[a-z] 开始录制宏 q  停止录制 @[a-z] 使用宏 @@ 调用最近使用的宏 22@[a-z] 多次重放宏 2. 宏的执行方式 串行方式:5@[a-z] 宏内包含向下一个目标 ...

  8. poj3181 Dollar Dayz

    Description Farmer John goes to Dollar Days at The Cow Store and discovers an unlimited number of to ...

  9. Django知识梳理

    请求周期: url > 路由 > 函数或类 > 返回字符串或模板语言 Form 表单提交: 先处理模板语言再讲HTML发出去 提交 > url > 函数或类中的方法  — ...

  10. Dos下mySql

    2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...