`
陌上花会开
  • 浏览: 39592 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)

阅读更多

各位网友,大家好,我是陌上花会开,人称陌陌,在上一篇文章《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》 中,我已经手把手带领大家开发了一个鼠标滑过时的动画特效。

这篇文章里,我将再带领大家开发另一个动画特效,希望大家能得到启发。还是一如往常,我不提供源码下载,但是可以保证:只要是将本教程中的代码,一步步复制到本地,定会得到楼主同样的运行效果。

好了,废话少说,直接进入今天的学习。楼主是个爱偷懒的人,所以我还是利用上一篇文章中的素材。

首先,我们先看一下今天需要实现的特效效果图:

1. 鼠标划过前:

2. 鼠标划过时,先平滑显示灰色遮盖物背景,接着平滑过渡显示搜索图标:

  

 

看完了效果图,直接进入本篇的CSS3实战之旅吧!

首先,我们编辑html代码:

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles">
        <meta name="keywords" content="css,css3,鼠标划过动画效果,css3实战开发,css3案例" />
        <title>css3实现鼠标划过图片时效果(1)</title>
    </head>
    <body>
      <a href="http://www.itdriver.cn">实战互联网</a>
        <div class="container">
            <div class="photowall">
                <div class="photoview">
                    <a href="http://www.itdriver.cn"><img src="img01.jpg" width="320" height="200" /></a>
                    <div class="mask"><a href="http://www.itdriver.cn">实战互联网</a></div>
                </div>

                <div class="photoview">
                    <a href="http://www.itdriver.cn"><img src="img02.jpg" width="320" height="200" /></a>
                    <div class="mask"><a href="http://www.itdriver.cn">实战互联网</a></div>
                </div>

            </div>
        </div>

    </body>
</html>
 

 

我们根据上面的效果图,大概可以知道要对哪几个div应用样式:

1. 给墙按上背景纸;

2.给照片应用样式,实现内边距补白;

3.设置一遮盖层;

好了,既然知道需要做哪些样式了,直接进入样式编码吧!

我们首先给container设置样式,使容器居中显示,代码如下:

*{ /* 清空所有元素内外边距*/
    margin:0;
    padding:0;
}

html,body,.container{ /*设置container高度浏览器自适应*/
    height:100%;    
}

.container { /*设置container容器样式*/
    width:80%; 
    margin:auto;
    padding:10px;
}
  
 

紧接着,我们给照片墙应用样式,给它贴上壁纸,同时设置它的高度为500px,代码如下:

.photowall{
    background:url(bg.png); /*设置照片墙背景*/
    background-size:cover;  /*设置背景以最小值填充*/
    height:500px; /*设置照片墙的高度*/
}

我们先看一下此时页面的运行效果:

现在我们应用CSS3的盒模型属性,将照片在垂直和水平方向上都居中显示,代码如下:

 
.photowall{ 
    background:url(bg.png); /*设置照片墙背景*/
    background-size:cover;  /*设置背景以最小值填充*/
    height:500px; /*设置照片墙的高度*/

    display:-webkit-box; /*应用盒子模型*/
    display:-moz-box;
    display:-o-box;
    display:box;

    -webkit-box-pack:center; /*使盒子内元素水平居中*/
    -moz-box-pack:center;
    -o-box-pack:center;
    box-pack:center;

    -webkit-box-align:center; /* 设置盒子内元素垂直方向上居中分配空间*/
    -moz-box-align:center;
    -o-box-align:center;
    box-align:center;
}
 

紧接着,我们给照片加上阴影效果,同时设置照片的内边框,代码如下:

 

照片的大体样子已经出来了,接着我们调整遮盖物的大小,以及利用绝对定位(父容器已经使用了相对定位),调整遮盖物蒙板的位置,同时给遮盖物应用transition属性(如果大家对transition属性不是太了解的,请关注我的其它博文),代码如下:

 
.photoview .mask{
    position:absolute; /*由于父容器设置了position:relative,所以子元素可以相对父容器做绝对定位*/
    top:0;
    left:0;

    height: 216px; /*设置遮盖物的宽高*/
    line-height:216px;
    width: 332px;

    display: inline-block;

    background:rgba(0, 0, 0, 0.7); /*设置背景半透明*/

    opacity:0; /*设置遮盖物为透明的*/
    visibility:hidden; /*设置遮盖物是不可见可见的*/

    -moz-transition:all 0.4s ease-in-out; /*设置transition属性,一旦遮盖物属性发生变化时,进行平滑动画过度*/
    -webkit-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    -ms-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
}
 

此时我们运行一下页面,看一下当前的页面显示效果:

现在我们来加上搜索图标,因为我们想给图片加上动画效果,所以我现在给a标签添加transition属性,代码如下:

 
.photoview .mask a{
    background:url(link.png) center no-repeat; /*给遮盖物上的a标签应用样式*/
    display:inline-block;
    height:20px;
    width:20px;
    overflow:hidden;
    text-decoration: none;
    text-indent:-9999;
    opacity:0; /*设置a标签默认为透明*/
    -moz-transition:all 0.3s ease-in-out; /*一旦a标签属性发生变化时,进行平滑动画过度*/
    -webkit-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
 

 

对于transition属性,这里我给大家对做个简单介绍,当一个元素应用了transition属性时,如果以后因为某一事件导致此元素的属性发生变化,则会进行平滑的动画过渡效果。这个正是我们所期待的,所以我给上面需要实现动画的遮盖物以及搜索图标都加上了这个属性。

根据最开始我给大家展示的效果“2. 鼠标划过时,先平滑显示灰色遮盖物背景,接着平滑过渡显示搜索图标:”,所以这里我们给照片添加hover事件,当鼠标划过照片时,我们分别重新设定遮盖物的属性和搜索图标的属性,代码如下:

.photoview:hover .mask { /*当鼠标划过照片时,将遮盖物设为不透明,将遮盖物可见的*/
   opacity: 1;
   background:rgba(0, 0, 0, 0.7);
   visibility:visible;
}

对于搜索图标,为了显示更好的动画效果,我们同时给她设定:延时0.3s执行动画,代码如下所示:

 
.photoview:hover .mask  a{ /*当鼠标划过照片时,将a标签设为不透明,且延迟0.3秒显示*/
   opacity: 1; 

   -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
 

至此,所以代码编写完了,现在我们来看一下效果:

正如所愿,达到了我们期望的效果。

当然,对于搜索图标延时效果,我们也可以直接采用复合方式,将

-moz-transition:all 0.3s ease-in-out;
修改为
-moz-transition:all 0.3s ease-in-out 0.3s;
最后的0.3s代表动画效果,延时多长时间后执行。

效果和上面都是一样的,这里我就不带领大家演示了。

这篇的教程就讲到这边,感谢大家的阅读。

 

欢迎大家加入互联网技术交流群:62329335 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
2
0
分享到:
评论

相关推荐

    纯CSS3鼠标滑过图片文字动画特效

    【标题】:“纯CSS3鼠标滑过图片文字动画特效” 在网页设计中,为了吸引用户的注意力和提升用户体验,常会采用各种动态效果。"纯CSS3鼠标滑过图片文字动画特效"是一种通过CSS3技术实现的交互式设计,它允许用户在...

    css3最新鼠标划过样式

    在CSS3中,鼠标划过样式(Hover效果)是一种常用的技术,用于改变用户将鼠标光标悬停在元素上时的视觉表现。这种效果能够增强用户界面的交互性和吸引力,常用于按钮、链接、菜单等元素。在"css3-hoverButton"这个...

    纯css3鼠标滑过图片文字旋转动画特效

    【纯CSS3鼠标滑过图片文字旋转动画特效】是一种利用CSS3的新特性来实现的交互效果,它在用户将鼠标指针悬停在图片上时,可以触发文字的旋转动画,提升网页的视觉吸引力和用户体验。这个特效的核心在于对CSS3选择器、...

    css3鼠标滑过图片文字动画特效.zip

    "css3鼠标滑过图片文字动画特效"是一个利用CSS3技术实现的网页交互功能,它能增强用户体验,使网页更加生动有趣。这个压缩包可能包含了五个不同的示例,用于展示当鼠标滑过图片时,与图片相关的文字或图层如何产生...

    7款CSS3鼠标滑过超链接动画特效.zip

    "7款CSS3鼠标滑过超链接动画特效"是一个关于网页设计的资源,它提供了七种不同的CSS3技术实现的超链接在鼠标悬停时的动画效果。这些动画通常用于提升用户体验,使网站更具互动性和吸引力。 【描述详解】 描述中提到...

    CSS3鼠标经过开花动画特效.rar

    CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效.rar CSS3鼠标经过开花动画特效....

    7款CSS3鼠标hover悬停动画特效代码.zip

    【CSS3鼠标hover悬停动画特效】是一种利用CSS3特性实现的交互效果,当鼠标指针悬停在某个元素上时,该元素会呈现出预先设定的动态变化。这些动画不仅提升了用户体验,还使网站或应用更具吸引力。在这个压缩包中包含...

    CSS3鼠标滑过图片3D翻转动画特效

    【CSS3鼠标滑过图片3D翻转动画特效】是一种利用CSS3的强大功能来实现的交互式网页设计技术。在现代网页设计中,动态效果和交互性是吸引用户注意力的关键因素,而CSS3的3D转换特性使得这些效果得以轻松实现。本特效...

    纯CSS3鼠标滑过动画按钮特效.zip

    在本资源"纯CSS3鼠标滑过动画按钮特效.zip"中,我们主要关注的是如何利用CSS3中的transition属性来创建动态、吸引人的按钮效果。这个特效适用于网站设计,可以增加用户体验,使用户与网页交互时有更丰富的视觉反馈。...

    炫酷CSS3鼠标滑过图片动画特效

    "炫酷CSS3鼠标滑过图片动画特效"是利用CSS3的特性实现的一种交互式网页设计技巧,旨在提升用户体验,使网站更加生动有趣。这个特效展示了CSS3在动态效果方面的强大能力,特别是3D转换和过渡效果。 首先,我们要理解...

    CSS3鼠标悬停图片动画特效

    【CSS3鼠标悬停图片动画特效】是一种利用CSS3中的transform和transition属性为网页上的图片设计的交互式视觉效果。这种特效在用户将鼠标指针悬停在图片上时,可以引发一系列动态变换,增强用户体验并提升网站的视觉...

    7款非常漂亮的CSS3鼠标hover图片动画特效

    在本文中,我们将深入探讨如何使用CSS3来创建令人印象深刻的鼠标悬停(hover)图片动画特效。这些特效是基于一个名为"magic.css"的库实现的,它为开发者提供了丰富的选择,使得网页中的图片在鼠标悬停时能展现出动态...

    纯CSS3鼠标经过按钮背景填充动画特效

    在本案例中,我们关注的是“纯CSS3鼠标经过按钮背景填充动画特效”,这是一种利用CSS3特性和过渡效果来实现的一种交互式设计。这种特效可以提升用户体验,使用户在与按钮交互时感受到动态的视觉反馈。 首先,让我们...

    CSS3鼠标悬停图标导航动画特效.zip

    本文将深入探讨“CSS3鼠标悬停图标导航动画特效”这一主题,它为网页导航带来了新颖且吸引人的交互体验。 首先,CSS3(层叠样式表第三版)是Web开发中的一个关键技术,它极大地扩展了CSS2的功能,特别是对于视觉...

    css3鼠标经过动画特效

    **CSS3鼠标经过动画特效详解** CSS3是 Cascading Style Sheets 的第三版,它为网页设计带来了许多新的特性和功能,极大地丰富了网页的表现力。其中,CSS3的动画效果尤其受到开发者和设计师的青睐。本特效即利用CSS3...

    9种纯CSS3鼠标滑过彩色按钮动画特效

    在本资源中,我们探讨的是一个专门利用CSS3创建的鼠标滑过彩色按钮动画特效,共计9种不同效果。这些特效为用户界面增添了一抹生动色彩,提高了用户体验。 首先,CSS3的:hover伪类是实现这些动画的关键。当鼠标指针...

    css3动画鼠标经过图片文字动画特效

    "css3动画鼠标经过图片文字动画特效"是一个常见的应用场景,它通过CSS3的:hover伪类和关键帧动画(@keyframes)来实现。当用户将鼠标悬停在特定元素上时,这种特效能够使图片或文字产生动态变化,提升用户体验。 ...

    纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip

    本资源“纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip”提供了一套实用的代码示例,帮助开发者们在网页设计中创建引人注目的交互式体验。 首先,我们要理解CSS3中的关键帧动画(@keyframes),这是实现这些...

    CSS3鼠标悬停图片显示文字动画特效

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是图片悬停时显示文字动画特效。这款特效是通过CSS3的:hover伪类、transition过渡效果以及可能涉及的transform变换实现...

    CSS3炫酷鼠标hover菜单动画特效

    【CSS3炫酷鼠标hover菜单动画特效】是利用现代网页技术CSS3实现的一种创新交互设计。这个特效在用户将鼠标悬停(hover)在菜单项上时,会在菜单项下方生成一条动态变化的波浪线,增加了用户体验的趣味性和互动性。在...

Global site tag (gtag.js) - Google Analytics