Based on CSS3 3D blinds image transition effects_html/css_WEB-ITnose

You may have seen many blind effects made using jQuery on the Internet. Can we use pure CSS to complete this work? The answer is yes. Not only can we make this blinds effect, we can also make it responsive.

Online preview Source code download

To create pure CSS blinds effect, HTML structure is the key. In the HTML structure, multiple identical pictures need to be used to organize a "blind". To make 10 blinds in our demo, we need 10 identical and place them in a

tag. At the same time, we also need 10 other pictures to be placed on the reverse side of the blinds. Each group of pictures is set to a different class. The code is as follows:

<figure id="blinds">    <img class="first lazy" src="/static/imghwm/default1.png" data-src="autumn-face.jpg" alt>    <img class="first lazy" src="/static/imghwm/default1.png" data-src="autumn-face.jpg" alt>    …    <img class="first lazy" src="/static/imghwm/default1.png" data-src="autumn-face.jpg" alt>    <img class="second lazy" src="/static/imghwm/default1.png" data-src="julia.jpg" alt>    <img class="second lazy" src="/static/imghwm/default1.png" data-src="julia.jpg" alt>    …    <img class="second lazy" src="/static/imghwm/default1.png" data-src="julia.jpg" alt></figure>   

At this time, all the blind slices will be rotated at the same time. To create the "pulsating" effect of the blinds, you can set a delay time for each slice's transition.

#blinds img:nth-child(1), #blinds img:nth-child(11) {    clip: rect(0px, 100px, 840px, 0px);    transform-origin: 50px 0px; }#blinds img:nth-child(2), #blinds img:nth-child(12) {    clip: rect(0px, 200px, 840px, 100px);    transform-origin: 150px 0px;    transition-delay: 100ms; }#blinds img:nth-child(3), #blinds img:nth-child(13) {    clip: rect(0px, 300px, 840px, 200px);    transform-origin: 250px 0px;    transition-delay: 200ms; }…#blinds img:nth-child(10n) {    clip: rect(0px, 1000px, 840px, 900px);    transform-origin: 950px 0px;    transition-delay: 900ms; }              

One of the biggest benefits of using the clip attribute is that it is naturally responsive: if the image is reduced, all slices will be reduced accordingly. Check out the demo and try zooming out your browser. When the width of the browser is less than 500 pixels, the image blinds only have 5 slices.

via: http://www.w2bc.com/Article/25379