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

网络
生活就是这样，有时候想念也是一种幸福，是那样的美所以愿每一个身边的朋友都珍惜自己来之不易的幸福吧，不管你的幸福是小时大，做最真实的自己，拥有最平凡的幸福！

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

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

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <sectionclass="cr-container">
  2. <inputid="select-img-1"name="radio-set-1"type="radio"class="cr-selector-img-1"checked/>
  3. <labelfor="select-img-1"class="cr-label-img-1">1</label>
  5. <inputid="select-img-2"name="radio-set-1"type="radio"class="cr-selector-img-2"/>
  6. <labelfor="select-img-2"class="cr-label-img-2">2</label>
  8. <inputid="select-img-3"name="radio-set-1"type="radio"class="cr-selector-img-3"/>
  9. <labelfor="select-img-3"class="cr-label-img-3">3</label>
  11. <inputid="select-img-4"name="radio-set-1"type="radio"class="cr-selector-img-4"/>
  12. <labelfor="select-img-4"class="cr-label-img-4">4</label>
  14. <divclass="clr"></div>
  15. <divclass="cr-bgimg">
  16. <div>
  17. <span>Slice1-Image1</span>
  18. <span>Slice1-Image2</span>
  19. <span>Slice1-Image3</span>
  20. <span>Slice1-Image4</span>
  21. </div>
  22. <div>
  23. <span>Slice2-Image1</span>
  24. <span>Slice2-Image2</span>
  25. <span>Slice2-Image3</span>
  26. <span>Slice2-Image4</span>
  27. </div>
  28. <div>
  29. <span>Slice3-Image1</span>
  30. <span>Slice3-Image2</span>
  31. <span>Slice3-Image3</span>
  32. <span>Slice3-Image4</span>
  33. </div>
  34. <div>
  35. <span>Slice4-Image1</span>
  36. <span>Slice4-Image2</span>
  37. <span>Slice4-Image3</span>
  38. <span>Slice4-Image4</span>
  39. </div>
  40. </div>
  41. <divclass="cr-titles">
  42. <h3><span>Serendipity</span><span>Whatyou'vebeendreamingof</span></h3>
  43. <h3><span>Adventure</span><span>Wherethefunbegins</span></h3>
  44. <h3><span>Nature</span><span>Unforgettableeperiences</span></h3>
  45. <h3><span>Serenity</span><span>Whensilencetouchesnature</span></h3>
  46. </div>
  47. </section>

CSS代码：

C# Code复制内容到剪贴板
  1. .cr-container{
  2. width:600px;
  3. height:400px;
  4. position:relative;
  5. margin:0auto;
  6. border:20pxsolid#fff;
  7. box-shadow:1px1px3pxrgba(0,0,0,0.1);
  8. }
  9. .cr-containerlabel{
  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-containerlabel: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:0px0px0px4pxrgba(255,255,255,0.3);
  32. z-index:-1;
  33. }
  34. .cr-containerlabel: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,lefttop,leftbottom,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-containerlabel.cr-label-img-4:after{
  50. width:0px;
  51. }
  52. .cr-containerinput.cr-selector-img-1:checked~label.cr-label-img-1,
  53. .cr-containerinput.cr-selector-img-2:checked~label.cr-label-img-2,
  54. .cr-containerinput.cr-selector-img-3:checked~label.cr-label-img-3,
  55. .cr-containerinput.cr-selector-img-4:checked~label.cr-label-img-4{
  56. color:#68abc2;
  57. }
  58. .cr-containerinput.cr-selector-img-1:checked~label.cr-label-img-1:before,
  59. .cr-containerinput.cr-selector-img-2:checked~label.cr-label-img-2:before,
  60. .cr-containerinput.cr-selector-img-3:checked~label.cr-label-img-3:before,
  61. .cr-containerinput.cr-selector-img-4:checked~label.cr-label-img-4:before{
  62. background:#fff;
  63. box-shadow:0px0px0px4pxrgba(104,171,194,0.6);
  64. }
  65. .cr-containerinput{
  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:00;
  79. }
  80. .cr-bgimgdiv{
  81. width:150px;
  82. height:100%;
  83. position:relative;
  84. float:left;
  85. overflow:hidden;
  86. background-repeat:no-repeat;
  87. }
  88. .cr-bgimgdivspan{
  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-containerinput.cr-selector-img-1:checked~.cr-bgimg,
  98. .cr-bgimgdivspan:nth-child(1){
  99. background-image:url(../images/1.jpg);
  100. }
  101. .cr-containerinput.cr-selector-img-2:checked~.cr-bgimg,
  102. .cr-bgimgdivspan:nth-child(2){
  103. background-image:url(../images/2.jpg);
  104. }
  105. .cr-containerinput.cr-selector-img-3:checked~.cr-bgimg,
  106. .cr-bgimgdivspan:nth-child(3){
  107. background-image:url(../images/3.jpg);
  108. }
  109. .cr-containerinput.cr-selector-img-4:checked~.cr-bgimg,
  110. .cr-bgimgdivspan:nth-child(4){
  111. background-image:url(../images/4.jpg);
  112. }
  113. .cr-bgimgdiv:nth-child(1)span{
  114. background-position:0px0px;
  115. }
  116. .cr-bgimgdiv:nth-child(2)span{
  117. background-position:-150px0px;
  118. }
  119. .cr-bgimgdiv:nth-child(3)span{
  120. background-position:-300px0px;
  121. }
  122. .cr-bgimgdiv:nth-child(4)span{
  123. background-position:-450px0px;
  124. }
  126. .cr-containerinput:checked~.cr-bgimgdivspan{
  127. -webkit-animation:slideOut0.6sease-in-out;
  128. -moz-animation:slideOut0.6sease-in-out;
  129. -o-animation:slideOut0.6sease-in-out;
  130. -ms-animation:slideOut0.6sease-in-out;
  131. animation:slideOut0.6sease-in-out;
  132. }
  133. @-webkit-keyframesslideOut{
  134. 0%{left:0px;}
  135. 100%{left:150px;}
  136. }
  137. @-moz-keyframesslideOut{
  138. 0%{left:0px;}
  139. 100%{left:150px;}
  140. }
  141. @-o-keyframesslideOut{
  142. 0%{left:0px;}
  143. 100%{left:150px;}
  144. }
  145. @-ms-keyframesslideOut{
  146. 0%{left:0px;}
  147. 100%{left:150px;}
  148. }
  149. @keyframesslideOut{
  150. 0%{left:0px;}
  151. 100%{left:150px;}
  152. }
  153. .cr-containerinput.cr-selector-img-1:checked~.cr-bgimgdivspan:nth-child(1),
  154. .cr-containerinput.cr-selector-img-2:checked~.cr-bgimgdivspan:nth-child(2),
  155. .cr-containerinput.cr-selector-img-3:checked~.cr-bgimgdivspan:nth-child(3),
  156. .cr-containerinput.cr-selector-img-4:checked~.cr-bgimgdivspan:nth-child(4)
  157. {
  158. -webkit-transition:left0.5sease-in-out;
  159. -moz-transition:left0.5sease-in-out;
  160. -o-transition:left0.5sease-in-out;
  161. -ms-transition:left0.5sease-in-out;
  162. transition:left0.5sease-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-titlesh3{
  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:1px1px1pxrgba(0,0,0,0.1);
  180. -webkit-transition:opacity0.8sease-in-out;
  181. -moz-transition:opacity0.8sease-in-out;
  182. -o-transition:opacity0.8sease-in-out;
  183. -ms-transition:opacity0.8sease-in-out;
  184. transition:opacity0.8sease-in-out;
  185. }
  186. .cr-titlesh3span:nth-child(1){
  187. font-family:'BebasNeueRegular','ArialNarrow',Arial,sans-serif;
  188. font-size:70px;
  189. display:block;
  190. letter-spacing:7px;
  191. }
  192. .cr-titlesh3span: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,"PalatinoLinotype","PalatinoLTSTD",Georgia,serif;
  200. }
  201. .cr-containerinput.cr-selector-img-1:checked~.cr-titlesh3:nth-child(1),
  202. .cr-containerinput.cr-selector-img-2:checked~.cr-titlesh3:nth-child(2),
  203. .cr-containerinput.cr-selector-img-3:checked~.cr-titlesh3:nth-child(3),
  204. .cr-containerinput.cr-selector-img-4:checked~.cr-titlesh3:nth-child(4){
  205. opacity:1;
  206. }
  207. /*MediaQuery:Let'sshowtheinputsonmobilesizedbrowsersbecausetheyprobablydon'tsupportthelabeltrick:*/
  208. @mediascreenand(max-width:768px){
  209. .cr-containerinput{
  210. display:inline;
  211. width:24%;
  212. margin-top:350px;
  213. z-index:1000;
  214. position:relative;
  215. }
  216. .cr-containerlabel{
  217. display:none;
  218. }
  219. }

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