四川盐亭网站制作公司

怎么用CSS3实现百叶窗焦点图动画

这篇文章主要介绍“怎么用CSS3实现百叶窗焦点图动画”，在日常操作中，相信很多人在怎么用CSS3实现百叶窗焦点图动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS3实现百叶窗焦点图动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联是一家专业从事成都网站设计、网站建设的网络公司。作为专业网站制作公司,成都创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、全网营销推广及网站设计开发服务！

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

怎么用CSS3实现百叶窗焦点图动画

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

HTML代码

XML/HTML Code复制内容到剪贴板

  1.        

  2.    

  3.  1  

  4.   

  5.    

  6.  2  

  7.   

  8.    

  9.  3  

  10.   

  11.    

  12.  4  

  13.   

  14.  

    

  •    

  •   

      

  •    Slice 1 - Image 1  

  •    Slice 1 - Image 2  

  •    Slice 1 - Image 3  

  •    Slice 1 - Image 4  

  •   

    •   

  •   

      

  •    Slice 2 - Image 1  

  •    Slice 2 - Image 2  

  •    Slice 2 - Image 3  

  •    Slice 2 - Image 4  

  •   

    •   

  •   

      

  •    Slice 3 - Image 1  

  •    Slice 3 - Image 2  

  •    Slice 3 - Image 3  

  •    Slice 3 - Image 4  

  •   

    •   

  •   

      

  •    Slice 4 - Image 1  

  •    Slice 4 - Image 2  

  •    Slice 4 - Image 3  

  •    Slice 4 - Image 4  

  •     

  •    

  •    

  •   

    SerendipityWhat you've been dreaming of

      

  •   

    AdventureWhere the fun begins

      

  •   

    NatureUnforgettable eperiences

      

  •   

    SerenityWhen silence touches nature

      

  •    

  •   

    • 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实现百叶窗焦点图动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    当前文章：怎么用CSS3实现百叶窗焦点图动画
    分享地址：http://scyanting.com/article/pogdie.html

    其他资讯