Using CSS3 to implement the shutter focus diagram animation instance code

This is a CSS3 based on the shutter focus diagram animation, a total of 4 different shutter animation style, each one seems very simple, but it is quite practical. More notable is the plug-in offers 4 different shutter effects, including horizontal shutters, vertical blinds, and faded blinds. Also, the CSS3 shutter picture switch plugin is very smooth when switching, the effect is very good.

Online Demo Source Download

We have listed one of the blinds style source code, others can download the source file for viewing.

HTML code

<section class= "Cr-container" ><input id= "select-img-1" name= "Radio-set-1" type= "Radio" class= " Cr-selector-img-1 "Checked/><label for=" select-img-1 "class=" cr-label-img-1 ">1</label><input id= "Select-img-2" name= "Radio-set-1" type= "Radio" class= "Cr-selector-img-2"/><label for= "select-img-2" class= " Cr-label-img-2 ">2</label><input id=" select-img-3 "name=" Radio-set-1 "type=" Radio "class=" Cr-selector-img-3 "/><label for=" select-img-3 "class=" cr-label-img-3 ">3</label><input id=" Select-img-4 "Name=" Radio-set-1 "type=" Radio "class=" cr-selector-img-4 "/><label for=" select-img-4 "class=" Cr-label-img-4 ">4</label><p class=" CLR "></p><p class=" cr-bgimg "><p><span> Slice 1-image 1</span><span>slice 1-image 2</span><span>slice 1-image 3</span><span >slice 1-image 4</span></p><p><span>slice 2-image 1</span><span>slice2-image 2</span><span>slice 2-image 3</span><span>slice 2-image 4</span></p>&lt ;p ><span>slice 3-image 1</span><span>slice 3-image 2</span><span>slice 3-image 3&lt ;/span><span>slice 3-image 4</span></p><p><span>slice 4-image 1</span>< Span>slice 4-image 2</span><span>slice 4-image 3</span><span>slice 4-image 4</span> </p></p><p class= "Cr-titles" >
CSS Code:
 

. cr-container{width:600px;height:400px;position:relative;margin:0 auto;border:20px solid #fff; box-shadow:1px 1px 3p x Rgba (0,0,0,0.1);}. Cr-container label{font-style:italic;width:150px;height:30px;cursor:pointer;color: #fff; line-height:32px; font-size:24px;float:left;position:relative;margin-top:350px;z-index:1000;}. Cr-container label:before{content: "Width:34px;height:34px;background:rgba (130,195,217,0.9);p Osition:absolute; Left:50%;margin-left: -17px;border-radius:50%;box-shadow:0px 0px 0px 4px rgba (255,255,255,0.3); z-index:-1;}. Cr-container label:after{width:1px;height:400px;content: '; background:-moz-linear-gradient (top, RGBA ( 255,255,255,0) 0, Rgba (255,255,255,1) 100%); background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, RGBA (255,255,255,0)), Color-stop (100%,rgba (255,255,255,1)); background:-webkit-linear-gradient (top, RGBA ( 255,255,255,0) 0%,rgba (255,255,255,1) 100%) Background:-o-linear-gradient (Top, Rgba (255,255,255,0) 0%,rgba (255,255,255,1) 100%) Background:-ms-linear-gradient (Top, Rgba (255,255,255,0) 0%,rgba (255,255,255,1) 100%); background: Linear-gradient (Top, Rgba (255,255,255,0) 0%,rgba (255,255,255,1) 100%); filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= ' #00ffffff ', endcolorstr= ' #ffffff ', gradienttype=0);p osition: Absolute;bottom: -20px;right:0px;}. Cr-container label.cr-label-img-4:after{width:0px;}. Cr-container input.cr-selector-img-1:checked ~ Label.cr-label-img-1,.cr-container input.cr-selector-img-2:checked ~ Label.cr-label-img-2,.cr-container input.cr-selector-img-3:checked ~ Label.cr-label-img-3,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{color: #68abc2;}. Cr-container input.cr-selector-img-1:checked ~ Label.cr-label-img-1:before,.cr-container input.cr-selector-img-2: Checked ~ Label.cr-label-img-2:before,.cr-container input.cr-selector-img-3:checked ~ Label.cr-label-img-3:before,. Cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{backgRound: #fff; box-shadow:0px 0px 0px 4px rgba (104,171,194,0.6);}. Cr-container Input{display:none;}. Cr-bgimg{width:600px;height:400px;position:absolute;left:0px;top:0px;z-index:1;}. cr-bgimg{background-repeat:no-repeat;background-position:0 0;}. Cr-bgimg p{width:150px;height:100%;p osition:relative;float:left;overflow:hidden;background-repeat:no-repeat;}. Cr-bgimg P span{position:absolute;width:100%;height:100%;top:0px;left: -150px;z-index:2;text-indent: -9000px;}. Cr-container input.cr-selector-img-1:checked ~ cr-bgimg,.cr-bgimg p Span:nth-child (1) {Background-image:url (.. /images/1.jpg);}. Cr-container input.cr-selector-img-2:checked ~ cr-bgimg,.cr-bgimg P Span:nth-child (2) {Background-image:url (.. /images/2.jpg);}. Cr-container input.cr-selector-img-3:checked ~ cr-bgimg,.cr-bgimg P Span:nth-child (3) {Background-image:url (.. /images/3.jpg);}. Cr-container input.cr-selector-img-4:checked ~ cr-bgimg,.cr-bgimg P Span:nth-child (4) {Background-image:url (.. /images/4.jpg);}. Cr-bgIMG P:nth-child (1) span{background-position:0px 0px;}. Cr-bgimg P:nth-child (2) span{background-position: -150px 0px;}. Cr-bgimg P:nth-child (3) span{background-position: -300px 0px;}. Cr-bgimg P:nth-child (4) span{background-position: -450px 0px;}. Cr-container input:checked ~ cr-bgimg p span{-webkit-animation:slideout 0.6s ease-in-out;-moz-animation:slideout 0.6s Ease-in-out;-o-animation:slideout 0.6s ease-in-out;-ms-animation:slideout 0.6s ease-in-out;animation:slideout 0.6s Ease-in-out;} @-webkit-keyframes slideout{0%{left:0px;} 100%{left:150px;}} @-moz-keyframes slideout{0%{left:0px;} 100%{left:150px;}} @-o-keyframes slideout{0%{left:0px;} 100%{left:150px;}} @-ms-keyframes slideout{0%{left:0px;} 100%{left:150px;}} @keyframes slideout{0%{left:0px;} 100%{left:150px;}}. Cr-container input.cr-selector-img-1:checked ~ cr-bgimg p span:nth-child (1),. Cr-container input.cr-selector-img-2: Checked ~. Cr-bgimg p Span:nth-child (2),. Cr-container Input.cr-selector-img-3:checkEd ~. Cr-bgimg P Span:nth-child (3),. Cr-container input.cr-selector-img-4:checked ~. Cr-bgimg p Span:nth-child (4) {- Webkit-transition:left 0.5s ease-in-out;-moz-transition:left 0.5s ease-in-out;-o-transition:left 0.5s ease-in-out;- Ms-transition:left 0.5s ease-in-out;transition:left 0.5s ease-in-out;-webkit-animation:none;-moz-animation:none;-o -animation:none;-ms-animation:none;animation:none;left:0px;z-index:10;}. Cr-titles H3{position:absolute;width:100%;text-align:center;top:50%;z-index:10000;opacity:0;color: #fff; text-shadow:1px 1px 1px rgba (0,0,0,0.1),-webkit-transition:opacity 0.8s ease-in-out;-moz-transition:opacity 0.8s Ease-in-out;-o-transition:opacity 0.8s ease-in-out;-ms-transition:opacity 0.8s ease-in-out;transition:opacity 0.8s Ease-in-out;}. Cr-titles h3 Span:nth-child (1) {font-family: ' bebasneueregular ', ' Arial Narrow ', Arial, sans-serif;font-size:70px; display:block;letter-spacing:7px;}. Cr-titles h3 Span:nth-child (2) {Letter-spacing:0px;display:blocK;background:rgba (104,171,194,0.9); Font-size:14px;padding:10px;font-style:italic;font-family:cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;}. Cr-container input.cr-selector-img-1:checked ~ cr-titles h3:nth-child (1),. Cr-container input.cr-selector-img-2: Checked ~. Cr-titles h3:nth-child (2),. Cr-container input.cr-selector-img-3:checked ~. Cr-titles H3:nth-child (3),. Cr-container input.cr-selector-img-4:checked ~ cr-titles h3:nth-child (4) {opacity:1;} /* Media Query:let's show the inputs on mobile sized browsers because they probably don ' t support the label trick: */@med IA screen and (max-width:768px) {. Cr-container input{display:inline;width:24%;margin-top:350px;z-index:1000; Position:relative;}. Cr-container Label{display:none;}