微信号:WEB_wysj

介绍:平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

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

2019-01-08 19:00 网页设计自学平台

点击上方[网页设计自学平台]右上角[...][设为星标⭐]

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

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

HTML代码

<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">1</label>

 

         <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">2</label>

 

         <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">3</label>

 

         <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">4</label>

 

         <div class="clr"></div>  

         <div class="cr-bgimg">

                 <div>

                          <span>Slice 1 - Image 1</span>

                          <span>Slice 1 - Image 2</span>

                          <span>Slice 1 - Image 3</span>

                          <span>Slice 1 - Image 4</span>

                 </div>

                 <div>

                          <span>Slice 2 - Image 1</span>

                          <span>Slice 2 - Image 2</span>

                          <span>Slice 2 - Image 3</span>

                          <span>Slice 2 - Image 4</span>

                 </div>

                 <div>

                          <span>Slice 3 - Image 1</span>

                          <span>Slice 3 - Image 2</span>

                          <span>Slice 3 - Image 3</span>

                          <span>Slice 3 - Image 4</span>

                 </div>

                 <div>

                          <span>Slice 4 - Image 1</span>

                          <span>Slice 4 - Image 2</span>

                          <span>Slice 4 - Image 3</span>

                          <span>Slice 4 - Image 4</span>

                 </div>

         </div>

         <div class="cr-titles">

                 <h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>

                 <h3><span>Adventure</span><span>Where the fun begins</span></h3>

                 <h3><span>Nature</span><span>Unforgettable eperiences</span></h3>

                 <h3><span>Serenity</span><span>When silence touches nature</span></h3>

         </div>

</section>


CSS代码:

.cr-container{

         width: 600px;

         height: 400px;

         position: relative;

         margin: 0 auto;

         border: 20px solid #fff;

         box-shadow: 1px1px3pxrgba(0,0,0,0.1);

}

.cr-container label{

         font-style: italic;

         width: 150px;

         height: 30px;

         cursor: pointer;

         color: #fff;

         line-height: 32px;

         font-size: 24px;

         float:left;

         position: relative;

         margin-top:350px;

         z-index: 1000;

}

.cr-container label:before{

         content:'';

         width: 34px;

         height: 34px;

         background: rgba(130,195,217,0.9);

         position: absolute;

         left: 50%;

         margin-left: -17px;

         border-radius: 50%;

         box-shadow: 0px0px0px4pxrgba(255,255,255,0.3);

         z-index:-1;

}

.cr-container label:after{

         width: 1px;

         height: 400px;

         content: '';

         background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

         background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));

         background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

         background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

         background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

         background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

         position: absolute;

         bottom: -20px;

         right: 0px;

}

.cr-container label.cr-label-img-4:after{

         width: 0px;

}

.cr-container input.cr-selector-img-1:checked~ label.cr-label-img-1,

.cr-container input.cr-selector-img-2:checked~ label.cr-label-img-2,

.cr-container input.cr-selector-img-3:checked~ label.cr-label-img-3,

.cr-container input.cr-selector-img-4:checked~ label.cr-label-img-4{

         color: #68abc2;

}

.cr-container input.cr-selector-img-1:checked~ label.cr-label-img-1:before,

.cr-container input.cr-selector-img-2:checked~ label.cr-label-img-2:before,

.cr-container input.cr-selector-img-3:checked~ label.cr-label-img-3:before,

.cr-container input.cr-selector-img-4:checked~ label.cr-label-img-4:before{

         background: #fff;

         box-shadow: 0px0px0px4pxrgba(104,171,194,0.6);

}

.cr-container input{

         display: none;

}

.cr-bgimg{

         width: 600px;

         height: 400px;

         position: absolute;

         left: 0px;

         top: 0px;

         z-index: 1;

}

.cr-bgimg{

         background-repeat: no-repeat;

         background-position: 00;

}

.cr-bgimg div{

         width: 150px;

         height: 100%;

         position: relative;

         float: left;

         overflow: hidden;

         background-repeat: no-repeat;

}

.cr-bgimg div span{

         position: absolute;

         width: 100%;

         height: 100%;

         top: 0px;

         left: -150px;

         z-index: 2;

         text-indent: -9000px;

}

.cr-container input.cr-selector-img-1:checked~ .cr-bgimg,

.cr-bgimg div span:nth-child(1){

         background-image: url(../images/1.jpg);

}

.cr-container input.cr-selector-img-2:checked~ .cr-bgimg,

.cr-bgimg div span:nth-child(2){

         background-image: url(../images/2.jpg);

}

.cr-container input.cr-selector-img-3:checked~ .cr-bgimg,

.cr-bgimg div span:nth-child(3){

         background-image: url(../images/3.jpg);

}

.cr-container input.cr-selector-img-4:checked~ .cr-bgimg,

.cr-bgimg div span:nth-child(4){

         background-image: url(../images/4.jpg);

}

.cr-bgimg div:nth-child(1) span{

         background-position: 0px0px;

}

.cr-bgimg div:nth-child(2) span{

         background-position: -150px0px;

}

.cr-bgimg div:nth-child(3) span{

         background-position: -300px0px;

}

.cr-bgimg div:nth-child(4) span{

         background-position: -450px0px;

}

 

.cr-container input:checked ~ .cr-bgimgdiv span{

         -webkit-animation: slideOut 0.6s ease-in-out;

         -moz-animation: slideOut 0.6s ease-in-out;

         -o-animation: slideOut 0.6s ease-in-out;

         -ms-animation: slideOut 0.6s ease-in-out;

         animation: slideOut 0.6s ease-in-out;

}

@-webkit-keyframesslideOut{

         0%{left: 0px; }

         100%{left: 150px; }

}

@-moz-keyframes slideOut{

         0%{left: 0px; }

         100%{left: 150px; }

}

@-o-keyframes slideOut{

         0%{left: 0px; }

         100%{left: 150px; }

}

@-ms-keyframes slideOut{

         0%{left: 0px; }

         100%{left: 150px; }

}

@keyframes slideOut{

         0%{left: 0px; }

         100%{left: 150px; }

}

.cr-container input.cr-selector-img-1:checked~ .cr-bgimg div span:nth-child(1),

.cr-container input.cr-selector-img-2:checked~ .cr-bgimg div span:nth-child(2),

.cr-container input.cr-selector-img-3:checked~ .cr-bgimg div span:nth-child(3),

.cr-container input.cr-selector-img-4:checked~ .cr-bgimg div span:nth-child(4)

{

         -webkit-transition: left 0.5s ease-in-out;

         -moz-transition: left 0.5s ease-in-out;

         -o-transition: left 0.5s ease-in-out;

         -ms-transition: left 0.5s ease-in-out;

         transition: left 0.5s ease-in-out;

         -webkit-animation: none;

         -moz-animation: none;

         -o-animation: none;

         -ms-animation: none;

         animation: none;

         left: 0px;

         z-index: 10;

}

.cr-titles h3{

         position: absolute;

         width: 100%;

         text-align: center;

         top: 50%;

         z-index: 10000;

         opacity: 0;

         color: #fff;

         text-shadow: 1px1px1pxrgba(0,0,0,0.1);

         -webkit-transition: opacity 0.8s ease-in-out;

         -moz-transition: opacity 0.8s ease-in-out;

         -o-transition: opacity 0.8s ease-in-out;

         -ms-transition: opacity 0.8s ease-in-out;

         transition: opacity 0.8s ease-in-out;

}

.cr-titles h3 span:nth-child(1){

         font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

         font-size: 70px;

         display: block;

         letter-spacing: 7px;

}

.cr-titles h3 span:nth-child(2){

         letter-spacing: 0px;

         display: block;

         background: rgba(104,171,194,0.9);

         font-size: 14px;

         padding: 10px;

         font-style: italic;

         font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

}

.cr-container input.cr-selector-img-1:checked~ .cr-titles h3:nth-child(1),

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

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

.cr-container input.cr-selector-img-4:checked~ .cr-titles h3:nth-child(4){

         opacity: 1;

}

/* Media Query: Let's show the inputs onmobile sized browsers because they probably don't support the label trick: */

@media screen and (max-width: 768px) {

         .cr-containerinput{

                 display: inline;

                 width: 24%;

                 margin-top: 350px;

                 z-index: 1000;

                 position: relative;

         }

         .cr-containerlabel{

                 display: none;

         }

}

原文链接(效果演示和源码下载):

http://www.codeceo.com/article/css3-blind-image-slider.html

作者:码农网 – 小峰

 
网页设计自学平台 更多文章 墙都不扶,就服你!偷窥第二波~ 不好好修图,专门拆穿网红的P图套路! DG又出新广告,被国外网友骂惨了! 农夫山泉2019金猪瓶,太萌了! 跨年晚会连环翻车,这些设计界的车祸事故也不能错过……
猜您喜欢 《Java性能优化指南及唯品会的实战》- GIAC2017版 理解 PHP 内部函数的定义 PHP初步:在Mac OS X Yosemite下搭建Apache+PHP+Mysql ✅我昨晚干了一件大事,让我立马感觉自己回到童年了! 人丑就要多读书(一)