怎么用CSS3實現百葉窗焦點圖動畫

這篇文章主要介紹“怎么用CSS3實現百葉窗焦點圖動畫”，在日常操作中，相信很多人在怎么用CSS3實現百葉窗焦點圖動畫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用CSS3實現百葉窗焦點圖動畫”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

這是一款基于CSS3的百葉窗焦點圖動畫，一共有4種不同的百葉窗動畫風格，每一個都看似非常簡單，但是卻又相當實用。更值得注意的是插件提供了4種不同的百葉窗特效，有水平百葉窗、垂直百葉窗和淡入淡出百葉窗等。并且，該CSS3百葉窗圖片切換插件切換時非常平滑，效果很不錯。

我們列出了其中一種百葉窗風格的源代碼，其他的大家可以下載源文件進行查看。

HTML代碼

XML/HTML Code復制內容到剪貼板

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.   <h4><span>Serendipity</span><span>What you've been dreaming of</span></h4>  

43.   <h4><span>Adventure</span><span>Where the fun begins</span></h4>  

44.   <h4><span>Nature</span><span>Unforgettable eperiences</span></h4>  

45.   <h4><span>Serenity</span><span>When silence touches nature</span></h4>  

46.  </div>  

47. </section>  

CSS代碼：

C# Code復制內容到剪貼板

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 h4{   

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 h4 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 h4 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 h4:nth-child(1),   

202. .cr-container input.cr-selector-img-2:checked ~ .cr-titles h4:nth-child(2),   

203. .cr-container input.cr-selector-img-3:checked ~ .cr-titles h4:nth-child(3),   

204. .cr-container input.cr-selector-img-4:checked ~ .cr-titles h4: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.   

到此，關于“怎么用CSS3實現百葉窗焦點圖動畫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！