Heim > Web-Frontend > HTML-Tutorial > 纯css3实现图片三角形排列_html/css_WEB-ITnose

纯css3实现图片三角形排列_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:56:12
Original
1233 Leute haben es durchsucht

当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class='container'>        <div class='wrap'>            <div class='crop'>                <img  src='128.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='129.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='130.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='131.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='132.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='133.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='134.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='135.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>    </div>
Nach dem Login kopieren

css3代码:

 body        {            background: #f1f1fa;        }                .container        {            margin: 140px auto 0;            font-size: 0;            max-width: 560px;        }                .wrap        {            -webkit-transform: rotate(45deg) translate3d(0, 0, 0);            -moz-transform: rotate(45deg) translate3d(0, 0, 0);            -ms-transform: rotate(45deg) translate3d(0, 0, 0);            -o-transform: rotate(45deg) translate3d(0, 0, 0);            transform: rotate(45deg) translate3d(0, 0, 0);            display: inline-block;            -webkit-transition: -webkit-transform 300ms ease-out;            -moz-transition: -moz-transform 300ms ease-out;            transition: transform 300ms ease-out;            width: 100px;        }        .wrap:hover        {            -webkit-transition: -webkit-transform 700ms ease-out;            -moz-transition: -moz-transform 700ms ease-out;            transition: transform 700ms ease-out;            -webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);            -moz-transform: rotate(45deg) translate3d(10px, 10px, 0);            -ms-transform: rotate(45deg) translate3d(10px, 10px, 0);            -o-transform: rotate(45deg) translate3d(10px, 10px, 0);            transform: rotate(45deg) translate3d(10px, 10px, 0);        }        .wrap:nth-child(even)        {            width: 40px;            -webkit-transform: rotate(225deg) translate3d(30px, 120px, 0);            -moz-transform: rotate(225deg) translate3d(30px, 120px, 0);            -ms-transform: rotate(225deg) translate3d(30px, 120px, 0);            -o-transform: rotate(225deg) translate3d(30px, 120px, 0);            transform: rotate(225deg) translate3d(30px, 120px, 0);        }        .wrap:nth-child(even) .crop img        {            -webkit-transform: skew(-20deg, -20deg) rotate(-225deg);            -moz-transform: skew(-20deg, -20deg) rotate(-225deg);            -ms-transform: skew(-20deg, -20deg) rotate(-225deg);            -o-transform: skew(-20deg, -20deg) rotate(-225deg);            transform: skew(-20deg, -20deg) rotate(-225deg);        }        .wrap:nth-child(even):hover        {            -webkit-transform: rotate(225deg) translate3d(40px, 130px, 0);            -moz-transform: rotate(225deg) translate3d(40px, 130px, 0);            -ms-transform: rotate(225deg) translate3d(40px, 130px, 0);            -o-transform: rotate(225deg) translate3d(40px, 130px, 0);            transform: rotate(225deg) translate3d(40px, 130px, 0);        }                .crop        {            position: relative;            width: 160px;            height: 160px;            margin: 0;            display: block;            overflow: hidden;            -webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);            -moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0);            -ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0);            -o-transform: skew(20deg, 20deg) translate3d(0, 0, 0);            transform: skew(20deg, 20deg) translate3d(0, 0, 0);        }        .crop img        {            width: 160px;            height: 160px;            position: absolute;            left: -50%;            margin-top: 36px;            margin-left: 36px;            top: -50%;            -webkit-transform: skew(-20deg, -20deg) rotate(-45deg);            -moz-transform: skew(-20deg, -20deg) rotate(-45deg);            -ms-transform: skew(-20deg, -20deg) rotate(-45deg);            -o-transform: skew(-20deg, -20deg) rotate(-45deg);            transform: skew(-20deg, -20deg) rotate(-45deg);            opacity: 0.7;            -webkit-transition: opacity 300ms ease-in-out;            -moz-transition: opacity 300ms ease-in-out;            transition: opacity 300ms ease-in-out;        }        .crop img:hover        {            opacity: 1;        }
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage