回到顶部
我的头像

RedSpite

网格算法配合CSS3,实现多彩绚丽的图片切换效果

平时喜欢在网上看看同行的博客,看到一个很好看的图片切换效果,很炫酷,果断学来了~ 哈哈

这是利用4个div显示同一图片的不同区域,css控制各图片位置,进行显示与隐藏,再给图片加上transition时长,就能形成华丽的视觉效果。 很多看似炫酷的效果,究其原理还是很简单的。心态放正,不要怕,直接上!

  • 图片1
  • 图片2
  • 图片3
  • 图片4
HTML:
                     
  • 图片1
  • 图片2
  • 图片3
  • 图片4
CSS:
                    .grid-box{
                        position: relative;
                        width: 280px;
                        height: 220px;
                        overflow: hidden;
                        border-radius: 10px;
                        border: 10px solid #dee5e1;
                        margin: 0 auto;
                    }

                    .pic1, .pic2{
                        font-size: 0;
                        box-sizing: content-box;
                        width: 260px;
                        height: 200px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        cursor: pointer;
                    }
                    .pic1 li{
                        width: 50%;
                        height: 100px;
                        position: relative;
                        overflow: hidden;
                        float: left;
                    }

                    .pic1 li > img{
                        position: absolute;
                    }
                     .pic1 li > img,.pic1:hover li > img,.pic2 , .grid-box:hover .pic2{
                        transition: all 0.5s ease;
                    }
                    .pic1 li:nth-child(1) img{
                        left:0;
                        top:0;
                    }
                    .pic1 li:nth-child(2) img{
                        left: -130px;
                        top: 0;
                    }
                    .pic1 li:nth-child(3) img{
                        left:0;
                        top: -100px;
                    }
                    .pic1 li:nth-child(4) img{
                        left: -130px;
                        top: -100px;
                    }
                    .pic2{
                        transform: scale(1.5);
                        -o-transform: scale(1.5);
                        -moz-transform: scale(1.5);
                        background: url("../image/about2.jpg") no-repeat center;
                        background-size: cover;
                        z-index: -1;
                    }
                    .grid-box:hover .pic2{
                        transform: scale(1);
                        -o-transform: scale(1);
                        -moz-transform: scale(1);
                        display: block;
                    }
                    .pic1:hover li:nth-child(1) img{
                        /*向下滑*/
                        top:100px;
                    }
                    .pic1:hover li:nth-child(2) img{
                        /*向左滑*/
                        left: -260px;
                    }
                    .pic1:hover li:nth-child(3) img{
                        /*向右滑*/
                        left: 130px;
                    }
                    .pic1:hover li:nth-child(4) img{
                        /*向上滑*/
                        top: -260px;
                    }
                

2016.10.08

© RedSpite | 蜀ICP备16004270号