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

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

csscss3实战开发动画特效 
阅读更多

各位网友大家好，我是陌上花会开，当然大家也可以叫我陌陌。今天这篇文章，我将手把手带领大家实战开发一个鼠标划过图片时的动画特效。在这里我不会给大家提供案例的源码下载，但是本人可以保证，只要大家跟着我的思路，一步步将代码复制到本地，一定会得到同样的运行效果。希望大家明白我的用心。好了不废话，直接进入今天的主题吧。

在今天这个案例里，我准备3个素材，一张背景图，两张风景图片。这个大家可以到网上自行下载。

在写代码之前，我先给大家展示一下，动画特效的效果图。

鼠标花过前：

当鼠标划过图片时，图片将逐渐变亮：

 

大家从上面的两幅比较图片大概也可以看出来，特效是：当鼠标划过图片时，由内而外逐渐变量。

好了，开始今天的实战之旅吧。

首先我们先编写html代码，下面高亮的样式名就是我们今天着重实现的：

 

<!DOCTYPE html>

 

<html>

<head>

<meta charset=”utf-8″>

<link rel=”stylesheet” href=”styles_2014080702.css”>

<meta name=”keywords” content=”css,css3,鼠标划过动画效果,css3实战开发,css3案例“ />

<title>css3实现鼠标划过图片时效果(1)</title>

</head>

<body>

<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“></div>

</div>

<div class=”photoview“>

<a href=”http://www.itdriver.cn”><img src=”img02.jpg” width=”320″ height=”200″ /></a>

<div class=”mask“></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;

}

 

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

.photowall .photoview { /*给照片框应用样式*/

 

padding:6px;

background:#FFFFFF;

margin:0 10px;

position:relative;

overflow:hidden; /*将溢出的内容隐藏*/

box-shadow:2px 2px 6px black; /*给照片框应用阴影效果*/

}

那此时的运行效果如何呢？

 

好了，整个样子已经出来的，现在我们给照片增加效果吧！

结果我们要做的就是先设置遮盖物，由于我们已经给照片类设置了position:relative;属性，现在我们可以轻易的通过绝对定位来改变样式为.mask的元素位置了。我们应该知道，当元素设置了position后，则代表它已经脱离了标准的文档流而悬浮起来，所以我们可以轻易的调整.mask元素的位置来达到遮盖物的效果。现在我们给遮盖物.mask应用效果吧：

.photoview .mask{

 

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

top:60px;

left:120px;

 

height: 120px; /*设置遮盖物的宽高*/

width: 120px;

 

cursor:pointer;

border-radius: 60px; /*给遮盖物设置圆角效果，如果radius=元素宽度*1/2 ，则此时元素就成一个圆形*/

border-width: 60px;

display: inline-block;

border: 60px solid rgba(0, 0, 0, 0.7);

-moz-box-sizing:border-box; /*以border-box方式计算容器的宽高*/

-webkit-box-sizing:border-box;

box-sizing:border-box;

 

opacity:1; /*设置遮盖物为不透明的*/

visibility:visible; /*设置遮盖物是可见的*/

 

-moz-transform:scale(4); /*将遮盖物放大4倍尺寸*/

-webkit-transform:scale(4);

-o-transform:scale(4);

-ms-transform:scale(4);

transform:scale(4);

 

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

-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;

}

如果大家对上面这些属性不是太了解的话，可以关注我的其他博文，里面会有详细讲解。此时我们再看一下运行效果：

 

遮盖物已经呈现半透明状态，并且已经完全遮盖住照片，在上面的样式中我们定义了 transition:all 0.4s ease-in-out; 这个是什么意思呢？

它其实是说，当.mask元素的样式发生变化时，以先快后慢的动画效果实现.mask样式属性的变化。

好了，当鼠标划过照片时，我们重新调整.mask属性样式：

.photoview:hover .mask { /*当鼠标划过照片时，将遮盖物设为透明，且border设为0，将遮盖物隐藏*/

 

opacity: 0;

border:0px solid rgba(0,0,0,0.7);

visibility:hidden;

}

至此，代码编写完了，现在我们看一下划过的效果吧：

 

 

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

      个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
3
顶
0
踩
分享到：
| CSS3实战开发:手把手教你照片墙实战开发
评论
3 楼 小橙子 2014-08-08  
mark!
2 楼 aatend 2014-08-08  
mark!
1 楼 叁顿饭的忧愁 2014-08-08  
mark！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3最新鼠标划过样式

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

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

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

    css3炫酷圆形图片鼠标滑过特效

    在IT行业中，CSS3是一种强大的样式...总之，"css3炫酷圆形图片鼠标滑过特效"是一个展示了CSS3强大功能的实例，它融合了多种CSS3属性和动画技术，对于前端开发者来说，学习和掌握这些技巧将极大地丰富他们的设计工具箱。

    两款鼠标hover图片CSS3动画特效

    本篇将详细讲解如何利用CSS3来创建两款炫酷的鼠标hover图片动画特效，以及涉及的关键技术和应用场景。 首先，CSS3的`transition`属性是实现平滑过渡效果的关键。当你改变一个元素的某个属性（如颜色、大小等）时，`...

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

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

    CSS3鼠标滑过导航出现下划线动画特效

    这款"CSS3鼠标滑过导航出现下划线动画特效"是利用CSS3的特性，如伪类选择器、过渡效果和边框，来创建一个优雅且吸引人的导航菜单。 首先，我们需要理解HTML结构，通常一个导航菜单由多个链接元素（`&lt;a&gt;`标签）组成...

    jQuery css3边框动画制作鼠标悬停图片边框动画特效

    "jQuery css3边框动画制作鼠标悬停图片边框动画特效"是一个利用jQuery和CSS3技术实现的交互式设计，它允许用户在鼠标悬停在图片上时，图片的边框产生吸引人的动画效果。下面将详细介绍如何实现这一功能。 首先，...

    css3鼠标经过动画特效

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

    纯css3鼠标滑过图片文字遮罩动画特效

    本主题聚焦于一个常见的网页元素——“鼠标滑过图片文字遮罩动画特效”，这是一种利用CSS3实现的动态效果，当用户将鼠标指针移动到图片上时，会显示出覆盖在图片上的文字信息，同时伴随着动画效果，增强了用户体验和...

    CSS3鼠标悬停图片网格切片动画特效

    在本文中，我们将深入探讨如何使用CSS3来创建一个具有鼠标悬停图片网格切片动画特效的交互式设计。这个特效在用户将鼠标光标移动到图片上时，会呈现出2张图片切片的动态过渡效果，从而为网站增添视觉吸引力。 首先...

    《CSS3实战：开发与设计》源码

    本书英文版书名《Practical CSS3：Developand Design》，作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程，是W3C网络教育社区组的联职主席。贯穿本书的一...

    CSS3鼠标经过图片显示线条边框动画特效

    【CSS3鼠标经过图片显示线条边框动画特效】是一种创新且引人注目的网页设计技术，它利用CSS3的强大功能，特别是在过渡（transition）和关键帧动画（keyframe animation）方面的特性，为用户界面增添动态视觉效果。...

    全屏焦点图片无滚动条 css3动画特效 图片随鼠标移动而移动

    在本项目中，我们主要探讨的是如何利用CSS3和HTML5技术实现一个全屏焦点图片展示效果，其中图片能够随着鼠标的移动而平滑地移动，同时无滚动条设计使得用户体验更加流畅。以下是对这个主题的详细解释： 一、全屏...

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

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

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

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

    CSS3鼠标经过图片3D翻转动画特效.zip

    在本文中，我们将深入探讨如何使用CSS3实现鼠标经过图片时的3D翻转动画特效。这个特效基于Bootstrap网格系统，使得布局更加灵活且响应式，同时通过CSS3的属性和变换，为用户带来生动有趣的交互体验。我们将分为以下...

Magicbox
Global site tag (gtag.js) - Google Analytics