CSS3之transition学习

开发笔记

在做网页时,经常会引入图片,然后发现transition这个属性对于图片特别实用。

0x01

这周要分享的是我学习的一个css3特性：css3过渡特性:transition。

这个属性很特别，几行简单的css代码，就能实现很炫酷的动画效果。

0x02

transition这个过渡属性的简单介绍：

我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

它的代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div 
{
  width:100px;
  height:100px;
  background:yellow;
  -webkit-transition:width 2s;
}
div:hover
{
  width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的div元素上，来查看过渡效果。</p>
</body>
<html>

过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

  • transition-property: 过渡属性(默认值为all)
  • transition-duration: 过渡持续时间(默认值为0s)
  • transiton-timing-function: 过渡函数(默认值为ease函数)
  • transition-delay: 过渡延迟时间(默认值为0s)
  • 过渡transition的这四个子属性只有是必需值且不能为0
  • 注意：Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
    Safari 和Chrome需要前缀 -webkit-。

0x03

使用transition给单个图片添加旋转拉近动画效果，通过这个属性要实现的功能是：鼠标经过图片，图片不仅旋转，而且图片的投影拉长，图片比例变大，形成了图片从墙面上浮起来的炫酷效果。效果图就是：

当鼠标放在长颈鹿上时，就感觉他从纸中跳出来一样

它的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
  margin:100px 365px 120px;
  display:block;
  width:350px;
  border-style:solid;
  border-color:grey;
}
.pic{
  display:block;
  width:300px;
  height:300px;
  margin:10px 10px 10px;
  padding:10px 10px 15px;
  border-color:yellow;
  -webkit-transform:rotate(30deg);
  -webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
  -webkit-transition:all 1s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
  border-color:#9a9a9a;
  -webkit-box-shadow:15px 15px 20px rgba(50,50,50,0.4);
  -webkit-transform:rotate(0deg) scale(1.5);

}
</style>
</head>
<body>
<div class="box">
  <div >
      <img src="E:\2017\yanyixia\feburay\2.20-2.23\2.20\长颈鹿.jpg"  class="pic" >
  </div>
</div>
</body>
<ml>

通过比较这个代码和之前的代码，你会发现它增加了盒阴影样式：-webkit-box-shadow,通过这个属性，它加大了投影的偏移，以及模糊的大小，同时投影的颜色也增加了。另外增加了-webkit-transform:rotate(0deg),scale(1.5)这个属性，通过这个属性使得动画效果更加明显。

下面讲解一下box-shadow这个属性:

  • 语法
  • box-shadow: h-shadow v-shadow blur spread color inset;
  • 其中水平阴影和垂直阴影是必需。其它四个选项是可选项。

0x04

将单个图片的悬浮效果应用到多张图片上，就有了图片墙的图片悬浮动画效果了。它能实现的效果为：

它的代码中需注意的是: 每张图片的a标签采用绝对定位，鼠标经过改变z-index使其顶层显示

其中 z-index 这个代码很重要。z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。并且这个属性仅能在定位元素上奏效。

参考链接：

http://www.360doc.com/content/14/0313/23/2961511_360409154.shtml