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

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

2021-09-05 843人已围观

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

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

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

HTML代码

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

<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4label>
<div class="clr">div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1span>
<span>Slice 1 - Image 2span>
<span>Slice 1 - Image 3span>
<span>Slice 1 - Image 4span>
div>
<div>
<span>Slice 2 - Image 1span>
<span>Slice 2 - Image 2span>
<span>Slice 2 - Image 3span>
<span>Slice 2 - Image 4span>
div>
<div>
<span>Slice 3 - Image 1span>
<span>Slice 3 - Image 2span>
<span>Slice 3 - Image 3span>
<span>Slice 3 - Image 4span>
div>
<div>
<span>Slice 4 - Image 1span>
<span>Slice 4 - Image 2span>
<span>Slice 4 - Image 3span>
<span>Slice 4 - Image 4span>
div>
div>
<div class="cr-titles">
<h3><span>Serendipityspan><span>What you've been dreaming ofspan>h3>
<h3><span>Adventurespan><span>Where the fun beginsspan>h3>
<h3><span>Naturespan><span>Unforgettable eperiencesspan>h3>
<h3><span>Serenityspan><span>When silence touches naturespan>h3>
div>
section>

CSS代码：

C# Code复制内容到剪贴板