首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onFebruary 24, 2016

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

非常漂亮的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.   <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代码：

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 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.   

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 #HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
海燕B411(1) 接收机(2) 修复(2) 放大器(1) 电子管(5) 车机(1) 矿石收音机(1) TECSUN(1) R601SW(1) DSP(2)
You might like
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
js如何取消事件冒泡
2013/09/23 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
js实现随机点名小功能
2017/08/17 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
js form表单input框限制20个字符，10个汉字代码实例
2019/04/12 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python实现截屏的函数
2015/07/26 Python
Python处理Excel文件实例代码
2017/06/20 Python
python处理csv中的空值方法
2018/06/22 Python
python批量获取html内body内容的实例
2019/01/02 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Marriott国际：万豪国际酒店查询预订
2017/09/25 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
财务科科长岗位职责
2014/03/10 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
Python使用永中文档转换服务
2022/05/06 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript