各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌。今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果。希望大家明白我的用心。好了不废话,直接进入今天的主题吧。
在今天这个案例里,我准备3个素材,一张背景图,两张风景图片。这个大家可以到网上自行下载。
在写代码之前,我先给大家展示一下,动画特效的效果图。
鼠标花过前:
当鼠标划过图片时,图片将逐渐变亮:
大家从上面的两幅比较图片大概也可以看出来,特效是:当鼠标划过图片时,由内而外逐渐变量。
好了,开始今天的实战之旅吧。
首先我们先编写html代码,下面高亮的样式名就是我们今天着重实现的:
我们根据上面的效果图,大概可以知道要对哪几个div应用样式:
1. 给墙按上背景纸;
2.给照片应用样式,实现内边距补白;
3.设置一遮盖层;
好了,既然知道需要做哪些样式了,直接进入样式编码吧!
我们首先给container设置样式,使容器居中显示,代码如下:
*{ /* 清空所有元素内外边距*/
html,body,.container{ /*设置container高度浏览器自适应*/ |
紧接着,我们给照片墙应用样式,给它贴上壁纸,同时设置它的高度为500px,代码如下:
.photowall{
background:url(bg.png); /*设置照片墙背景*/ |
我们先看一下此时页面的运行效果:
现在我们应用CSS3的盒模型属性,将照片在垂直和水平方向上都居中显示,代码如下:
.photowall{
background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ display:-webkit-box; /*应用盒子模型*/ -webkit-box-pack:center; /*使盒子内元素水平居中*/ |
紧接着,我们给照片加上阴影效果,同时设置照片的内边框,代码如下:
.photowall .photoview { /*给照片框应用样式*/
|
那此时的运行效果如何呢?
好了,整个样子已经出来的,现在我们给照片增加效果吧!
结果我们要做的就是先设置遮盖物,由于我们已经给照片类设置了position:relative;属性,现在我们可以轻易的通过绝对定位来改变样式为.mask的元素位置了。我们应该知道,当元素设置了position后,则代表它已经脱离了标准的文档流而悬浮起来,所以我们可以轻易的调整.mask元素的位置来达到遮盖物的效果。现在我们给遮盖物.mask应用效果吧:
如果大家对上面这些属性不是太了解的话,可以关注我的其他博文,里面会有详细讲解。此时我们再看一下运行效果:
遮盖物已经呈现半透明状态,并且已经完全遮盖住照片,在上面的样式中我们定义了 transition:all 0.4s ease-in-out; 这个是什么意思呢?
它其实是说,当.mask元素的样式发生变化时,以先快后慢的动画效果实现.mask样式属性的变化。
好了,当鼠标划过照片时,我们重新调整.mask属性样式:
.photoview:hover .mask { /*当鼠标划过照片时,将遮盖物设为透明,且border设为0,将遮盖物隐藏*/
|
至此,代码编写完了,现在我们看一下划过的效果吧:
欢迎大家加入互联网技术交流群:62329335
相关推荐
插件描述:css3最新鼠标划过样式,使用纯css3打造的最新的鼠标划过样式的展示. 参考示例:http://www.jq22.com/jquery-info5808
这是两款效果非常炫酷的鼠标hover图片CSS3动画特效。特效中在鼠标hover图片的时候,使用transition和transform来制作图片说明文本和图标的CSS3动画特效。
纯CSS3鼠标滑过图片文字动画特效
本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一...
一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效,当鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,视觉效果相当好看。
纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效。该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷。
这是一款超酷CSS3鼠标悬停图片背景动画特效。该特效在鼠标悬停到图片上面的时候,通过CSS3帧动画和filter过滤器来制作非常炫酷的图片遮罩层动画效果。
这是一款使用纯css3制作的炫酷圆形图片鼠标滑过特效合集。共有7种效果,7种鼠标hover效果分别是:圆形放大缩小、翻盖动画、3d翻转、淡入淡出、翻页效果和3d旋转。
插件描述:9款css3鼠标划过图片散开特效代码 参考示例:http://www.jq22.com/jquery-info4323
jQuery css3边框动画制作鼠标悬停图片边框动画特效
css3鼠标滑过图片文字动画特效是一款常用的5种纯css3实现的鼠标滑过图片动画效果。
代码简介: 纯CSS3鼠标滑过动画按钮特效是一款基于CSS3 transition属性实现的按钮动画特效。
纯CSS3鼠标经过按钮背景填充动画特效
插件描述:20种配合场景的CSS3鼠标滑过文字动画特效. 参考示例:http://www.jq22.com/jquery-info5984
这是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效。该CSS3特效中,当鼠标滑过圆形图片时,图片以顶边的一个定位点为中心向下旋转,显示出下面的圆形说明文本。
一款纯CSS3制作的鼠标悬停图片网格切片动画特效,鼠标经过2张图片切片显示动画效果。
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
css3鼠标滑过菜单显示人物图片特效