css 鼠标移入边框填充效果
<!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 鼠标移入边框填充效果的更多相关文章
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...
- 使用纯css鼠标移入效果,炫酷的旋转正方体
首先我们需要创建几个盒子 </div> <div class="wrap"> <div class="cube"> < ...
- React实现了一个鼠标移入的菜单栏效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title> ...
- CSS鼠标效果手型效果
Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...
- html css鼠标样式,鼠标形状
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- css实现鼠标移入table时出现滚动条且table内容不移位
一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...
随机推荐
- SVG动画实践篇-无中生有的线条动画
git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path 说明 这个动画实现的是线条动画,主要用 ...
- 手机微硬盘读取速度>50MB/s eMMC技术浅析
转载:http://mobile.zol.com.cn/296/2968659_all.html#p2968659 手机微硬盘读取速度>50MB/s 在开始今天的话题之前,请大家随笔者一起时光倒 ...
- 【转载】Linux下套接字学习
感觉这个系列还不错,学习一下. 先看的是第三篇: http://blog.csdn.net/gatieme/article/details/46334337 < Linux下套接字详解(三)-- ...
- Shadow Map阴影贴图技术之探 【转】
这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...
- Linux图形界面和文字界面的切换
Ctrl+Alt+F1~F6:切换到文字界面 登陆tty1~tty6终端, 运行等级为run level 3 Ctrl+Alt+F7 或者输入命令startX:切换到图形界面,运行等级为run lev ...
- dom4j的xpath查找xml的指定节点
递归遍历所有节点http://blog.csdn.net/sidihuo/article/details/47318723 获取Document SAXReader saxReader = new S ...
- 读《疯狂Java讲义》笔记总结三
1.初始化块 实际上初始化块是一个假象,使用javac命令编译Java类后,该Java类中的初始化块会消失--初始化块中代码会被 "还原" 到每一个构造器中,且位于构造器全部代码的 ...
- 安卓UI适配限定符
引言 对于程序在不同尺寸的Android机器上执行,对UI的适用性造成了额外的开销,只是限定符的出现,非常方便的攻克了这个问题.通过创建限定符相关的文件夹来解决资源的载入. 限定符用处 限定符(mdp ...
- caffe搭建--caffe在invidia+cpu 酷睿2Q9300 + ubuntu16.04.2上面的安装和编译过程
本文原创,转载请注明出处. ------------------------------------------------分割线-------------------------------- 概要 ...
- 关于arr.map()问题
最近看map实现原理, Array.prototype._map = function(fn, context) { console.log(fn, context) var temp = []; i ...