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

浏览数：33 / 时间：2015年06月09日

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

在今天这个案例里，我准备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 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 html src word log display class style 代码 html src word log display

相关文章

随机文章

您可能还喜欢

您可能还喜欢