您现在的位置是：网站首页> 编程资料编程资料

非常漂亮的CSS3百叶窗焦点图动画纯CSS实现图片百叶窗展示效果示例

2023-10-23 222人已围观

简介 这篇文章主要为大家详细介绍了非常漂亮的CSS3百叶窗焦点图动画，共有4种不同的百叶窗动画风格，每一个都看似非常简单，但是却又相当实用，感兴趣的小伙伴们可以参考一下

这是一款基于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">1label>  
  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">2label>  
  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">3label>  
  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">4label>  
  13.   
  14.  <div class="clr">div>    
  15.  <div class="cr-bgimg">  
  16.   <div>  
  17.    <span>Slice 1 - Image 1span>  
  18.    <span>Slice 1 - Image 2span>  
  19.    <span>Slice 1 - Image 3span>  
  20.    <span>Slice 1 - Image 4span>  
  21.   div>  
  22.   <div>  
  23.    <span>Slice 2 - Image 1span>  
  24.    <span>Slice 2 - Image 2span>  
  25.    <span>Slice 2 - Image 3span>  
  26.    <span>Slice 2 - Image 4span>  
  27.   div>  
  28.   <div>  
  29.    <span>Slice 3 - Image 1span>  
  30.    <span>Slice 3 - Image 2span>  
  31.    <span>Slic

    上一篇：全面总结CSS代码的编写规范及优化建议CSS代码书写规范究极指南编写灵活、稳定、高质量的HTML和css代码规范指南css代码缩写 div+css布局代码简写规范19楼论坛的前端CSS代码规范介绍让样式表CSS代码更加专业规范闭合浮动元素让CSS代码更规范-CSS教程-网页制作-网页教学网分享20条编写 CSS 代码的建议

    下一篇：基于html和CSS3制作简单侧边导航栏使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html5 横向滑动导航栏的方法示例html+css 实现简易导航栏功能基于html和CSS3制作酷炫的导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网