使用CSS3悬停效果打造不同的页面版式
2012-11-21 11:10
501 查看
CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是 CSS 3D 转换、动画等特性的支持,可以轻松的创建很酷的 Web 效果。
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解。今天就分享一些悬停效果,可以更好的帮助你开发
demo
(说到 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。
)
本文链接:使用CSS3悬停效果打造不同的页面版式
123
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解。今天就分享一些悬停效果,可以更好的帮助你开发
demo
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
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
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
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
HTML
在此示例中的代码是比之前的明显减少,但做出来的悬停效果将是非常令人印象深刻的.<div class="view fourth-effect"> <a href="#" title="Full Image"><img src="images/4.jpg" /></a> <div class="mask"></div> </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
HTML
最后一个例子是上面几个例子的结合.添加一个fifth-effect类<div class="view fifth-effect"> <a href="#" title="Full Image"><img src="images/5.jpg" /></a> <div class="mask"></div> </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; }
本文链接:使用CSS3悬停效果打造不同的页面版式
123
相关文章推荐
- 使用css3 background属性制作3D易拉罐效果
- 使用ViewPager多页面滑动切换以及动画效果
- Android中使用ViewPager和PagerTabStrip实现页面滑动效果
- PS使用滤镜打造出抽象类似眼睛的艺术效果
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 使用css3中transition的页面切换
- iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果
- 使用CSS3设计地图上的雷达定位提示效果
- 使用jQuery和CSS3的全屏搜索效果
- 使用spin.js优化等待ajax返回时的页面效果
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- MVC3 Razor 根据不同页面使用不同Layout
- [转帖]高档的moss页面修改工具SPCAMLEditor使用系列(1)--利用SPCAMLEditor,10分钟打造一个在线视频播放库
- 完美实现在同一个页面中使用不同样式的artDialog样式
- 使用百度UEditor 和Websocket 实现手机端实时预览页面编辑效果
- Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
- css3导航hover悬停效果
- 【ASP.NET】如何使用类创建公共函数,在不同ASP.NET页面间重复调用