您的位置：首页 > Web前端 > CSS

css3做图片放大特效

2015-11-14 13:59 633 查看

想做一个图片墙的那种的，就是好多图片一点击就可以放大，缓慢放大那种，首先想到用css3实现，因为足够简单。这里因为动画要缓慢变大，所以要用到过渡属性transition这个属性，他可以定义你原来的css值的设置到后天发生事件比如hover这样的事件的时候，他是怎么过渡过去的。

下面先讲一个小例子，先看一下，入个门；体验一下transition这个是怎么用的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.con{width: 200px;height: 200px;margin:030px auto;background-color: pink;
-webkit-transition: width 2s,height 2s;}
.con:hover{width: 300px;height: 300px;background-color: red;-webkit-transition: width 2s,height 2s;}
</style>
</head>
<body>
<div class="con"></div>
</body>
</html>

运行这个代码可以看到中间的小方块的宽和高在同时增大，而且是经过了2s的时间，为什么要添加两个

-webkit-transition: width 2s,height 2s;

呢？是因为一个是你要经过2s时间变过去的样子，一个是你鼠标移走他怎么变回去的样子，这里我直接复制粘贴了，有兴趣的朋友可以直接改，体验一个这两个的区别。

下面我们来看他transition的属性，总共有四个属性，分别是

1.transition-property这个指的是要变化的属性名称，比如width

2.transition-duration：2s这个是的是要变化的时间，比如2s

3.transition-timing-function规定过渡的时间曲线，默认是ease也可是linear，ease-in、ease-out、ease-in-out也可以是cubic-bezier（n,n,n,n）在里面自己定义0到1之间的任何值。

4.transition-delay规定过渡时间是从什么时候开始。默认是0s

所以综上所述，可以归纳为这样

transition：property，duration，timing-funcition，delay。

这里每个值都可以设置多个，每一组用逗号分开就行这种

width 2s,height 2s;

不填的为默认值。这种设置单个属性width可以但是不好看，没有从中间变大，css3有一个2d和3d转换的属性transform这个东西，通过设置他的参数可以获得好多效果，包括上面的放大特效，这里就不手打了w3sshool上面有就直接贴了

详细的说明可以看这个图片。里面有个scale（x，y）可以改变元素的宽和高，也可以直接写一个参数，就是让他变为原来大小的多少倍，比如-webkit-transform: scale(1.50)

就是变为原来的1.5倍大小。

好通过学习上面两个属性就可以做出照片放大的效果；

下面我贴出我的代码供大家参考：希望有意见的尽管提；

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>pictureWallCss3</title>
<link rel="stylesheet"  href="css/reset.css">
<style>
.images{width:600px;height:600px;margin:25px auto;}
ul{padding: 0}
li{width: 200px;height: 200px;float: left;}
img{width: 98%;height: 98%;border: 1px solid white;
;
transition:all 1s ease-out 0s;}
img:hover{-webkit-transform: scale(1.10);
transition:all 0.5s ease-out 0s;
position: relative;z-index: 2
}
</style>
</head>
<body>
<div class="images">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
<ul>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
</ul>
<ul>
<li><img src="images/7.jpg"></li>
<li><img src="images/8.jpg"></li>
<li><img src="images/9.jpg"></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航