CSS3悬停效果案例应用


Posted in HTML / CSS onNovember 21, 2012

CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是 CSS 3D 转换、动画等特性的支持,可以轻松的创建很酷的 Web 效果。
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解。今天就分享一些悬停效果,可以更好的帮助你开发
CSS3悬停效果案例应用 
HTML标记
这个简单的结构使我们能够使这些效果。正如你可以看到下面的代码中我们创建了一个父类视图,里面的内容。然后,我们创建一个类的面具,我们将了CSS3过渡到悬停效果。在后面的例子中,这个语法可以稍稍发生变化,这取决于你想要的效果应用。

复制代码
代码如下:

<div class="view">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
在这里,你将我们的教程设置的基本属性。对于每一个效果会有不同的CSS文件,你可以把到一个CSS文件中的各种效果。
复制代码
代码如下:

.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(../img/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}

1 Example
CSS3悬停效果案例应用 
HTML
对具有这种效果的类视图的元素添加特殊类效果。这里在view类的基础上添加effect类
复制代码
代码如下:

<div class="view effect">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
这里除了使用的边框属性来创建一个三角形,我使用的多个转换,允许我在动画期间对每个属性有更多的控制。
复制代码
代码如下:

effect img {
opacity:1;
transform:scale(1,1);
transition: all 0.2s ease-in;
}
.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:150px;
width:0;
height:0;
transform:translateY(-125px);
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
opacity:0;
transform:translateY(-125px);
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
opacity:0.7;
transform:scale(2,2);
}
.effect:hover .mask {
opacity: 1;
transform: translateY(0px);
}
.effect:hover a.info {
opacity:1;
transform:translateY(100px);
}

2 Example
CSS3悬停效果案例应用 
HTML
在此示例中的语法会稍有不同
复制代码
代码如下:

<div class="view second-effect">
<img src="images/2.jpg" />
<div class="mask">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
在这个例子当中使用边框熟悉对变量进行调整. 这里使用 box-sizing. box-sizing 熟悉被用来改变默认的CSS盒宽度和高度大小,具体怎么使用呢,我简单解释一下
(说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。box-sizing:content-box:当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。box-sizing:border-box:当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的 “width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
复制代码
代码如下:

.second-effect .mask {
opacity: 0;
overflow:visible;
border:0px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position:relative;
top:-10px;
opacity:0;
transform:scale(0,0);
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity:1;
transform:scale(1,1);
transition-delay:0.3s;
}

3 Example
CSS3悬停效果案例应用 
HTML
这里在view类的基础上添加third-effect类.
复制代码
代码如下:

<div class="view third-effect">
<img src="images/3.jpg" />
<div class="mask">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
使用边框属性只需要简单的几行代码就能得到非常棒的效果.
复制代码
代码如下:

.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.third-effect a.info {
position:relative;
top:-10px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}

4 Example
CSS3悬停效果案例应用 
HTML
在此示例中的代码是比之前的明显减少,但做出来的悬停效果将是非常令人印象深刻的.
1 <div class="view fourth-effect">
2 <a href="#" title="Full Image"><img src="images/4.jpg" /></a>
3 <div class="mask"></div>
4 </div>
CSS
仅使用mask类与border-radius属性结合打造出一个美丽的悬停效果,单击图片实现图片的可见性
复制代码
代码如下:

.fourth-effect .mask {
position:absolute; /* Center the mask */
top:50px;
left:100px;
cursor:pointer;
border-radius: 50px;
border-width: 50px;
display: inline-block;
height: 100px;
width: 100px;
border: 50px solid rgba(0, 0, 0, 0.7);
box-sizing:border-box;
opacity:1;
visibility:visible;
transform:scale(4);
transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
opacity: 0;
border:0px solid rgba(0,0,0,0.7);
visibility:hidden;
}

5 Example
CSS3悬停效果案例应用 
HTML
最后一个例子是上面几个例子的结合.添加一个fifth-effect类
1 <div class="view fifth-effect">
2 <a href="#" title="Full Image"><img src="images/5.jpg" /></a>
3 <div class="mask"></div>
4 </div>
<div class="view fifth-effect">
<a href="#" title="Full Image"><img src="images/5.jpg" /></a>
<div class="mask"></div>
</div>
CSS
在这里使用边框属性的rgba属性。来改变可见图片的透明度.
复制代码
代码如下:

.fifth-effect img {
opacity:0.2;
transition: all 0.3s ease-in;
}
.fifth-effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.fifth-effect:hover img {
opacity:1;
}
HTML / CSS 相关文章推荐
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 #HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 #HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python和c语言的主要区别总结
2019/07/07 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
2014全国两会心得体会
2014/03/17 职场文书
经济类毕业生求职信
2014/06/26 职场文书
招标授权委托书样本
2014/09/23 职场文书
高一军训决心书
2015/02/05 职场文书
求职自我评价怎么写
2015/03/09 职场文书
市场督导岗位职责
2015/04/10 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis