非常漂亮的CSS3百叶窗焦点图动画

这是一款基于CSS3的百叶窗焦点图动画，一共有4种不同的百叶窗动画风格，每一个都看似非常简单，但是却又相当实用。更值得注意的是插件提供了4种不同的百叶窗特效，有水平百叶窗、垂直百叶窗和淡入淡出百叶窗等。并且，该CSS3百叶窗图片切换插件切换时非常平滑，效果很不错。

我们列出了其中一种百叶窗风格的源代码，其他的大家可以下载源文件进行查看。

HTML代码

1. <section class="cr-container">       
2.  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>  
3.  <label for="select-img-1" class="cr-label-img-1">1</label>  
4.   
5.  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />  
6.  <label for="select-img-2" class="cr-label-img-2">2</label>  
7.   
8.  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />  
9.  <label for="select-img-3" class="cr-label-img-3">3</label>  
10.   
11.  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />  
12.  <label for="select-img-4" class="cr-label-img-4">4</label>  
13.   
14.  <div class="clr"></div>    
15.  <div class="cr-bgimg">  
16.   <div>  
17.    <span>Slice 1 - Image 1</span>  
18.    <span>Slice 1 - Image 2</span>  
19.    <span>Slice 1 - Image 3</span>  
20.    <span>Slice 1 - Image 4</span>  
21.   </div>  
22.   <div>  
23.    <span>Slice 2 - Image 1</span>  
24.    <span>Slice 2 - Image 2</span>  
25.    <span>Slice 2 - Image 3</span>  
26.    <span>Slice 2 - Image 4</span>  
27.   </div>  
28.   <div>  
29.    <span>Slice 3 - Image 1</span>  
30.    <span>Slice 3 - Image 2</span>  
31.    <span>Slice 3 - Image 3</span>  
32.    <span>Slice 3 - Image 4</span>  
33.   </div>  
34.   <div>  
35.    <span>Slice 4 - Image 1</span>  
36.    <span>Slice 4 - Image 2</span>  
37.    <span>Slice 4 - Image 3</span>  
38.    <span>Slice 4 - Image 4</span>  
39.   </div>  
40.  </div>  
41.  <div class="cr-titles">  
42.   <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>  
43.   <h3><span>Adventure</span><span>Where the fun begins</span></h3>  
44.   <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>  
45.   <h3><span>Serenity</span><span>When silence touches nature</span></h3>  
46.  </div>  
47. </section>  

CSS代码：

1. .cr-container{   
2.  width: 600px;   
3.  height: 400px;   
4.  position: relative;   
5.  margin: 0 auto;   
6.  border: 20px solid #fff;   
7.  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);   
8. }   
9. .cr-container label{   
10.  font-style: italic;   
11.  width: 150px;   
12.  height: 30px;   
13.  cursor: pointer;   
14.  color: #fff;   
15.  line-height: 32px;   
16.  font-size: 24px;   
17.  float:left;   
18.  position: relative;   
19.  margin-top:350px;   
20.  z-index: 1000;   
21. }   
22. .cr-container label:before{   
23.  content:'';   
24.  width: 34px;   
25.  height: 34px;   
26.  background: rgba(130,195,217,0.9);   
27.  position: absolute;   
28.  left: 50%;   
29.  margin-left: -17px;   
30.  border-radius: 50%;   
31.  box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);   
32.  z-index:-1;   
33. }   
34. .cr-container label:after{   
35.  width: 1px;   
36.  height: 400px;   
37.  content: '';   
38.  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);   
39.  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));   
40.  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);   
41.  background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);   
42.  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);   
43.  background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);   
44.  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );   
45.  position: absolute;   
46.  bottom: -20px;   
47.  right: 0px;   
48. }   
49. .cr-container label.cr-label-img-4:after{   
50.  width: 0px;   
51. }   
52. .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,   
53. .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,   
54. .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,   
55. .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{   
56.  color: #68abc2;   
57. }   
58. .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,   
59. .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,   
60. .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,   
61. .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{   
62.  background: #fff;   
63.  box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);   
64. }   
65. .cr-container input{   
66.  display: none;   
67. }   
68. .cr-bgimg{   
69.  width: 600px;   
70.  height: 400px;   
71.  position: absolute;   
72.  left: 0px;   
73.  top: 0px;   
74.  z-index: 1;   
75. }   
76. .cr-bgimg{   
77.  background-repeat: no-repeat;   
78.  background-position: 0 0;   
79. }   
80. .cr-bgimg div{   
81.  width: 150px;   
82.  height: 100%;   
83.  position: relative;   
84.  float: left;   
85.  overflow: hidden;   
86.  background-repeat: no-repeat;   
87. }   
88. .cr-bgimg div span{   
89.  position: absolute;   
90.  width: 100%;   
91.  height: 100%;   
92.  top: 0px;   
93.  left: -150px;   
94.  z-index: 2;   
95.  text-indent: -9000px;   
96. }   
97. .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,   
98. .cr-bgimg div span:nth-child(1){   
99.  background-image: url(../images/1.jpg);   
100. }   
101. .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,   
102. .cr-bgimg div span:nth-child(2){   
103.  background-image: url(../images/2.jpg);   
104. }   
105. .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,   
106. .cr-bgimg div span:nth-child(3){   
107.  background-image: url(../images/3.jpg);   
108. }   
109. .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,   
110. .cr-bgimg div span:nth-child(4){   
111.  background-image: url(../images/4.jpg);   
112. }   
113. .cr-bgimg div:nth-child(1) span{   
114.  background-position: 0px 0px;   
115. }   
116. .cr-bgimg div:nth-child(2) span{   
117.  background-position: -150px 0px;   
118. }   
119. .cr-bgimg div:nth-child(3) span{   
120.  background-position: -300px 0px;   
121. }   
122. .cr-bgimg div:nth-child(4) span{   
123.  background-position: -450px 0px;   
124. }   
125.   
126. .cr-container input:checked ~ .cr-bgimg div span{   
127.  -webkit-animation: slideOut 0.6s ease-in-out;   
128.  -moz-animation: slideOut 0.6s ease-in-out;   
129.  -o-animation: slideOut 0.6s ease-in-out;   
130.  -ms-animation: slideOut 0.6s ease-in-out;   
131.  animation: slideOut 0.6s ease-in-out;   
132. }   
133. @-webkit-keyframes slideOut{   
134.  0%{ left: 0px; }   
135.  100%{ left: 150px; }   
136. }   
137. @-moz-keyframes slideOut{   
138.  0%{ left: 0px; }   
139.  100%{ left: 150px; }   
140. }   
141. @-o-keyframes slideOut{   
142.  0%{ left: 0px; }   
143.  100%{ left: 150px; }   
144. }   
145. @-ms-keyframes slideOut{   
146.  0%{ left: 0px; }   
147.  100%{ left: 150px; }   
148. }   
149. @keyframes slideOut{   
150.  0%{ left: 0px; }   
151.  100%{ left: 150px; }   
152. }   
153. .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),   
154. .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),   
155. .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),   
156. .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)   
157. {   
158.  -webkit-transition: left 0.5s ease-in-out;   
159.  -moz-transition: left 0.5s ease-in-out;   
160.  -o-transition: left 0.5s ease-in-out;   
161.  -ms-transition: left 0.5s ease-in-out;   
162.  transition: left 0.5s ease-in-out;   
163.  -webkit-animation: none;   
164.  -moz-animation: none;   
165.  -o-animation: none;   
166.  -ms-animation: none;   
167.  animation: none;   
168.  left: 0px;   
169.  z-index: 10;   
170. }   
171. .cr-titles h3{   
172.  position: absolute;   
173.  width: 100%;   
174.  text-align: center;   
175.  top: 50%;   
176.  z-index: 10000;   
177.  opacity: 0;   
178.  color: #fff;   
179.  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);   
180.  -webkit-transition: opacity 0.8s ease-in-out;   
181.  -moz-transition: opacity 0.8s ease-in-out;   
182.  -o-transition: opacity 0.8s ease-in-out;   
183.  -ms-transition: opacity 0.8s ease-in-out;   
184.  transition: opacity 0.8s ease-in-out;   
185. }   
186. .cr-titles h3 span:nth-child(1){   
187.  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;   
188.  font-size: 70px;   
189.  display: block;   
190.  letter-spacing: 7px;   
191. }   
192. .cr-titles h3 span:nth-child(2){   
193.  letter-spacing: 0px;   
194.  display: block;   
195.  background: rgba(104,171,194,0.9);   
196.  font-size: 14px;   
197.  padding: 10px;   
198.  font-style: italic;   
199.  font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;   
200. }   
201. .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),   
202. .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),   
203. .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),   
204. .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){   
205.  opacity: 1;   
206. }   
207. /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */  
208. @media screen and (max-width: 768px) {   
209.  .cr-container input{   
210.   display: inline;   
211.   width: 24%;   
212.   margin-top: 350px;   
213.   z-index: 1000;   
214.   position: relative;   
215.  }   
216.  .cr-container label{   
217.   display: none;   
218.  }   
219. }   
220.   

以上就是本文的全部内容，希望对大家的学习有所帮助。