css3做图片放大特效

来源：互联网发布：美化二维码制作软件编辑：程序博客网时间：2024/06/05 06:07

想做一个图片墙的那种的，就是好多图片一点击就可以放大，缓慢放大那种，首先想到用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上面有就直接贴了
css3transform详细介绍
详细的说明可以看这个图片。里面有个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>

0 0