各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌。今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果。希望大家明白我的用心。好了不废话,直接进入今天的主题吧。
在今天这个案例里,我准备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中,鼠标划过样式(Hover效果)是一种常用的技术,用于改变用户将鼠标光标悬停在元素上时的视觉表现。这种效果能够增强用户界面的交互性和吸引力,常用于按钮、链接、菜单等元素。在"css3-hoverButton"这个...
【标题】:“纯CSS3鼠标滑过图片文字动画特效” 在网页设计中,为了吸引用户的注意力和提升用户体验,常会采用各种动态效果。"纯CSS3鼠标滑过图片文字动画特效"是一种通过CSS3技术实现的交互式设计,它允许用户在...
在IT行业中,CSS3是一种强大的样式...总之,"css3炫酷圆形图片鼠标滑过特效"是一个展示了CSS3强大功能的实例,它融合了多种CSS3属性和动画技术,对于前端开发者来说,学习和掌握这些技巧将极大地丰富他们的设计工具箱。
【纯CSS3鼠标滑过图片文字旋转动画特效】是一种利用CSS3的新特性来实现的交互效果,它在用户将鼠标指针悬停在图片上时,可以触发文字的旋转动画,提升网页的视觉吸引力和用户体验。这个特效的核心在于对CSS3选择器、...
【CSS3鼠标hover悬停动画特效】是一种利用CSS3特性实现的交互效果,当鼠标指针悬停在某个元素上时,该元素会呈现出预先设定的动态变化。这些动画不仅提升了用户体验,还使网站或应用更具吸引力。在这个压缩包中包含...
【CSS3鼠标滑过图片3D翻转动画特效】是一种利用CSS3的强大功能来实现的交互式网页设计技术。在现代网页设计中,动态效果和交互性是吸引用户注意力的关键因素,而CSS3的3D转换特性使得这些效果得以轻松实现。本特效...
这款"CSS3鼠标滑过导航出现下划线动画特效"是利用CSS3的特性,如伪类选择器、过渡效果和边框,来创建一个优雅且吸引人的导航菜单。 首先,我们需要理解HTML结构,通常一个导航菜单由多个链接元素(`<a>`标签)组成...
在描述中提到的“9款css3鼠标划过图片散开特效”,这些特效通常涉及到CSS3的转换(transform)、过渡(transition)和动画(animation)属性。例如,当鼠标滑过图片时,图片可以分散成多个部分,然后在鼠标离开时...
"jQuery css3边框动画制作鼠标悬停图片边框动画特效"是一个利用jQuery和CSS3技术实现的交互式设计,它允许用户在鼠标悬停在图片上时,图片的边框产生吸引人的动画效果。下面将详细介绍如何实现这一功能。 首先,...
**CSS3鼠标经过动画特效详解** CSS3是 Cascading Style Sheets 的第三版,它为网页设计带来了许多新的特性和功能,极大地丰富了网页的表现力。其中,CSS3的动画效果尤其受到开发者和设计师的青睐。本特效即利用CSS3...
本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一...
在本文中,我们将深入探讨如何使用CSS3来创建令人印象深刻的鼠标悬停(hover)图片动画特效。这些特效是基于一个名为"magic.css"的库实现的,它为开发者提供了丰富的选择,使得网页中的图片在鼠标悬停时能展现出动态...
在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是图片悬停时显示文字动画特效。这款特效是通过CSS3的:hover伪类、transition过渡效果以及可能涉及的transform变换实现...
在本文中,我们将深入探讨如何使用CSS3实现鼠标经过图片时的3D翻转动画特效。这个特效基于Bootstrap网格系统,使得布局更加灵活且响应式,同时通过CSS3的属性和变换,为用户带来生动有趣的交互体验。我们将分为以下...
"10组风格绚丽的CSS3鼠标滑过图片特效"是一个集合,包含了多种创新的、吸引人的交互式图片特效,能够极大地提升用户体验,使用户在浏览网站时感受到独特的视觉享受。这些特效充分利用了CSS3的新特性,如过渡...
"7款CSS3鼠标滑过超链接动画特效"是一个关于网页设计的资源,它提供了七种不同的CSS3技术实现的超链接在鼠标悬停时的动画效果。这些动画通常用于提升用户体验,使网站更具互动性和吸引力。 【描述详解】 描述中提到...
在本资源"纯CSS3鼠标滑过动画按钮特效.zip"中,我们主要关注的是如何利用CSS3中的transition属性来创建动态、吸引人的按钮效果。这个特效适用于网站设计,可以增加用户体验,使用户与网页交互时有更丰富的视觉反馈。...
这个“纯css3实现鼠标悬停后图片散开动画特效.zip”文件显然包含了一个示例,展示了如何利用CSS3的特性来创建一个交互式的图片展示效果。当用户将鼠标悬停在图片上时,图片会呈现出散开的动画效果,增加了用户体验的...
【CSS3炫酷鼠标hover菜单动画特效】是利用现代网页技术CSS3实现的一种创新交互设计。这个特效在用户将鼠标悬停(hover)在菜单项上时,会在菜单项下方生成一条动态变化的波浪线,增加了用户体验的趣味性和互动性。在...
本资源“鼠标hover图片css3动画特效.zip”正是利用了CSS3的特性,特别是在鼠标悬停(hover)事件上应用的动画效果,以增强用户界面的互动体验。以下将详细介绍其中涉及的知识点: 1. **CSS3 Hover伪类**: CSS3中...