css3做图片放大特效

最新推荐文章于 2022-08-06 18:50:58 发布

vieber

最新推荐文章于 2022-08-06 18:50:58 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/sufubo/article/details/49835423

版权

前端专栏收录该内容

91 篇文章 0 订阅

订阅专栏

想做一个图片墙的那种的，就是好多图片一点击就可以放大，缓慢放大那种，首先想到用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>