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

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

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

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

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

鼠标花过前:

永利开户送38元体验金 1

当鼠标划过图片时,图片将逐渐变亮:

永利开户送38元体验金 2

 

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

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

首先我们先编写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;
}

永利开户送38元体验金, 

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

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

 

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

永利开户送38元体验金 3

 

现在我们应用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; /*给照片框应用阴影效果*/
}

 

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

永利开户送38元体验金 4

 

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

结果我们要做的就是先设置遮盖物,由于我们已经给照片类设置了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;

}

 

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

永利开户送38元体验金 5

 

遮盖物已经呈现半透明状态,并且已经完全遮盖住照片,在上面的样式中我们定义了 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;
}

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

永利开户送38元体验金 6

 

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

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

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

有想学PS的朋友?本人手把手教你,学会为止

100块?那么便宜啊?呵呵
 

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

零基础 学wsad下的开发 大家给个学习顺序,建议

1)《JAVA编程思想》第三版,主要是学习JAVA基础知识,这个当然是能学多少学多少,反正早晚都要学,没时间就只看最基础的章节。
2)《Servlet与JSP核心技术》,学习J2EE最基础的部分,也就是Servlet和JSP,主要是掌握思想。
3)《J2EE应用与IBM
WEBSPHERE》,WSAD使用的服务器就是WEBSPHERE,而使用WSAD最主要的作用就是开发J2EE应用程序,所以这个不可不学。
4)WSAD并没有什么可以买到的书籍,最快的学习方法就是边用边学,边学边用。

给你推荐的都是众所皆知的经典好书,电子版倒是也都能下到,但还是建议买一本,花不了多少钱,边看电子书边学习操作也不方便,你说呢:)
 

:
手把手教大家实战开发鼠标划过图片动画特效,css3实战
各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌。今天…

鼠标花过前:

永利开户送38元体验金 7

当鼠标划过图片时,图片将逐渐变亮:

永利开户送38元体验金 8

 

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

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

首先我们先编写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; /*设置照片墙的高度*/  }

 

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

永利开户送38元体验金 9

 

现在我们应用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; /*给照片框应用阴影效果*/  }

 

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

永利开户送38元体验金 10

 

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

结果我们要做的就是先设置遮盖物,由于我们已经给照片类设置了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;    }

 

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

永利开户送38元体验金 7

 

遮盖物已经呈现半透明状态,并且已经完全遮盖住照片,在上面的样式中我们定义了 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;  }

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

永利开户送38元体验金 8

 

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

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


相关文章