微信号:WEB_wysj

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

非常迷你的纯CSS3时间轴切换焦点图

2019-01-04 19:00 码农网 - 小峰

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

这是一款基于jQuery的和CSS3的焦点图动画插件,插件非常迷你,功能也比较简单,它的特点是图片切换按钮类似一条时间轴,点击时间轴的圆圈即可切换到相应的图片。点击切换按钮时,按钮会出现渐隐渐显的发光特效,图片切换过程中整张图片过渡的效果非常柔和,并且图片描述也相应以动画的方式显示在图片上,是一款非常棒的CSS3图片切换组件。

HTML代码:

< div  id = “gal” >

  < nav  class = “galnav” >

   < ul >

                 < li > < input  type = “radio”  name = “btn”  value = “one”  checked = “checked” />

                 < label  for = “btn” > </ label >

       < figure >

         < img  src = images / 01_Fabio_Basile.jpg“ />

         <figcaption >

            < H4 >Fabio巴西莱 </ H4 >

              < NAV  角色 = '导航' >

                < p > iPhone 6无限 </ p >

                 < UL >

                          < > < 一个HREF =   = “entypo-dribbble” >

                          </ a > </ li >

                          < li > < a  href = class =“entypo-twitter” > </ a >

                          </ li >

                 </ ul >

              </ nav >   

         </ figcaption>

       </ figure >

         </ li >

                 < li > < input  type = “radio”  name = “btn”  value = “two” />  < label  for = “btn” >

                 </ label >

        <figure  class = “entypo-forward” >

         < img  src = “images / 08_Brian_Miller.jpg” />

         < figcaption>

            < h4 > Brian Miller </ h4 >

              < nav  role = 'navigation' >

                < p > TypeTi.me </ p >

                 < ul >

                          < li > < a  href =  class = “entypo-dribbble” > </ a >

                          </ li >

                          < li >< 一个HREF =   = “entypo-叽叽喳喳 > </ >

                          </ >

                 </ UL >

              </ NAV >   

         </ figcaption>

       </ 数字 >

         </ >

                 < > < 输入类型 = “radio”  name = “btn”  value = “three” />  < label  for = “btn”>

                 </ label >

       < figure  class = “entypo-forward” >

         < img  src = “images / 05_Nicolas_Quod.jpg” />

         < figcaption>

            < h4 > Nicolas Quod </ h4 >

              < nav  role = 'navigation' >

                < p > Iphone 6 - 通知-  iOS 7 </ p >

                 < ul >

                          < li >

                          < a  href = class = “entypo-dribbble” >

                          </ > </ >

                          < >

                          < 一个HREF =   = “entypo-叽叽喳喳 >

                          </ > </ >

                 </ UL >

              </ NAV >   

         </ figcaption>

       </ 数字 >

         </ li >

                 < li > < input  type = “radio”  name = “btn”value = “four” />  <label  for = “btn” >

                 </ label >

        < figure  class = “entypo-forward” >

         < img  src = “images / 04_Joffrey.jpg” />

         < figcaption>

            < h4 > Joffrey </ h4 >

              < nav  role = '导航' >

                < p >功能齐全 </ p >

                 < ul >

                          < li > <一个href =  = “entypo-dribbble” >

                          </ > </ >

                          < > < 一个HREF =   = “entypo-叽叽喳喳 >

                          </ > </ >

                 </ UL >

              < / nav >   

         </ figcaption>

       </ figure >

         </ li >

                 < li > <input  type = “radio”  name =“btn”  value = “five” />  < label  for = “btn” >

                 </ label >

        < figure  class = “entypo-forward” >

         < img  src = “images / 09_Jared_Long.jpg” />

         < figcaption>

            < h4 > Jared Long </ h4 >

              < nav  role = 'navigation' >

                < p > Don't放下你的iPhone Infinity </ p >

                 <UL >

                          < >

                          < 一个HREF =   = “entypo-dribbble” >

                          </ > </ >

                          < >

                          < 一个HREF =   = “entypo-Behance >

                          </ > </ li >

                 </ ul >

             </ nav >   

         </ figcaption>

       </ figure >

         </ li >

                 < li> < input  type = “radio”  name = “btn”  value = “six” />  < label  for = “btn” >

                 </ label >

        < figure  class = “entypo-forward” >

         < img  src = “images / 02_Charles_Treece .jpg“ />

         < figcaption>

            < h4 > Charles Treece </ h4 >

              <nav  role = 'navigation' >

                <p > iPhone 6无限远侧状态栏 </ p >

                 < UL >

                          < >

                          < 一个HREF =   = “entypo-dribbble” >

                          </ > </ >

                          < >

                          < 一个HREF =  class = ”entypo-twitter“ >

                          </ a > </ li >

                 </ ul >

              </ nav > 

         </ figcaption>

       </ figure >

         </ li >

         </ ul >

  </ nav >

</ div >

CSS代码

因为这款焦点图插件并没有使用任何JS代码,所以,图片切换功能全部依赖CSS3相关特性,具体的CSS代码如下:

#gal {

  positionrelative;

  宽度600px ;

  身高300px ;

  保证金0自动;

  100px ;

  背景:白色;

  -webkit-box-shadow0px  0px  0px  10px white

              5px  5px  0px  10px  rgba0,0,0,0.1;

  -moz-box-shadow0px  0px  0px  10px white

              5px  5px  0px  10pxrgba0,0,0,0.1;

  box-shadow0px  0px  0px  10px white

              5px  5px  0px  10px  rgba0,0,0,0.1;

  -webkit-transformtranslate3d0,0,0;

  -moz-transform    translate3d0,0,0;

  -ms-transform     translate3d0,0,0;

  -o-transform      translate3d0,0,0;

  transform         translate3d0,0,0;

}

#gal after {

  content'' ;

  位置:绝对;

  底部24px ;

  0 ;

  0 ;

  宽度100 ;

  身高1px ;

  背景rgba255,255,255,0.35;

  z-index3 ;

}

#gal  ul{ list-style-typenone;}

 input[type =“radio”]input [type =“radio”] + label {

  positionabsolute;

  底部15px ;

  显示:块;

  宽度20px ;

  身高20px ;

  -webkit-border-radius50 ;

  -moz-border-radius50 ;

  border-radius50 ;

  游标:指针;

}

input [type =“radio”] {

  opacity0 ;

  z-index9 ;

}

输入[value =“one”]输入[value =“one”] + label { left20px ;}

 input[value =“two”]输入[value =“two”] + label { left128px ;}

 input[value =“three”]input [value =“three”] + label { left236px ;}

 input[value =“four”]input [value =“four”] + label { left344px;}

 输入[value =“five”]输入[value =“five”] + 标签 { left452px ;}

 输入[value =“six”]输入[value =“six”] + 标签 { right20px ;}

 输入[类型= “无线电”] + 标签 {

  背景RGBA255,255,255,0.35;

  z-index7 ;

  -webkit-box-shadow0px  0px  0px  0px  rgba255,255,255,0.15;

  -moz-box-shadow0px  0px  0px  0px  rgba255,255,255,0.15;

  box-shadow0px  0px  0px  0px  rgba255,255,255,0.15;

  -webkit-transition:全部。3s ;

  -moz-transition:全部。3s ;

  -o-transition:全部。3s ;

  过渡:全部。3s ;

}

[class * =“entypo-”] :在 {

  positionabsolute;之前

  font-family'entypo'sans-serif;

}

figure [class * =“entypo-”] :在 {

  left10px ;之前

  5px ;

  font-size2rem ;

  颜色rgba255,255,255,0;

  z-index1 ;

  -webkit-transitioncolor1s ;

  -moz-transition:颜色。1s ;

  -o-transition:颜色。1s ;

  过渡:颜色。1s ;

}

a [class * =“entypo-”] :在 {

  top8px ;之前

  9px ;

  font-size1.5rem ;

  颜色:白色;

}

a :悬停[class *=“entypo-”] :在 {

  colorwhite;之前

}

imgfigcaption {

  positionabsolute;

  顶部0 ;

  0 ;

}

{

  bottom0 ;

  0 ;

  宽度600px ;

  身高300px ;

  显示:块;

  溢出:隐藏;

}

img {

  bottom0 ;

  0 ;

  显示:块;

  宽度600px ;

  身高300px ;

  z-index1 ;

  -webkit-transformtranslateX600px;

  -moz-transformtranslateX600px;

  -ms-transformtranslateX600px;

  -o-transformtranslateX600px;

  transformtranslateX600px;

  -webkit-transition:全部。15s15sz-index 0s ;

  -moz-transition:全部。15s15sz-index 0s ;

  -o-transition:全部。15s15sz-index 0s ;

  过渡:全部。15s15sz-index 0s ;

}

figcaption {

  displayblock;

  宽度270px ;

  身高300px ;

  padding-top20px ;

  background-image径向渐变rgba255,255,255,0.3),透明);

  背景大小600px  600px ;

  background-repeatno-repeat;

  背景位置 - 300px - 150px ;

  text-aligncenter;

  z-index3 ;

  -webkit-box-shadow - 5px0px  20px  rgba0,0,0,0.1;

  -moz-box-shadow - 5px  0px  20px  rgba0,0,0,0.1;

  box-shadow - 5px  0px  20px  rgba0,0,0,0.1;

  -webkit-transformtranslateX300px;

  -moz-transformtranslateX300px;

  -ms-transformtranslateX300px;

  -o-transformtranslateX300px;

  变换translateX300px;

  -webkit-transition:全部。35S;

  -moz-transition:全部。35s ;

  -o-transition:全部。35s ;

  过渡:全部。35s ;

}

h4 {

  displayinline-block;

  填充0  15px ;

  颜色:白色;

  font-family'Titillium Web'sans-serif;

  font-weight300 ;

  font-size2rem ;

}

figcaption  nav ul { displayblock; padding-top10px ;}

 figcaption nav  ul  li { displayinline-block; margin-left5px ;}

 figcaption nav  ul  li  a {

  positionrelative;

  显示:块;

  宽度40px ;

  身高40px ;

  背景rgba255,255,255,0.2;

  text-decorationnone;

  颜色:白色;

  -webkit-border-radius50 ;

  -moz-border-radius50 ;

  border-radius50 ;

  -webkit-box-shadowinset 0px  0px  0px  0px  rgba255,255,255,0;

  -moz-box-shadowinset 0px  0px  0px  0px  rgba255,255,255,0;

  box-shadowinset 0px  0px  0px  0px  rgba255,255,255,0;

  -webkit-transition:全部。15s ;

  -moz-transition:全部。15s ;

  -o-transition:全部。15s ;

  过渡:全部。15s ;

}

figcaption  nav ul  li  a hover {

  backgroundrgba255,255,255,0;

  -webkit-box-shadowinset 0px  0px  0px  2px  rgba255,255,255,1;

  -moz-box-shadowinset 0px  0px  0px  2px  rgba255,255,255,1;

  box-shadowinset 0px  0px  0px  2px  rgba255,255,255,1;

}

figcaption  p{

  padding50px  15px ;

  font-family'Titillium Web'sans-serif;

  font-weight300 ;

  颜色333 ;

  background-image-webkit-gradient(线性,0 0,0 100%,来自(rgba255,255,255,0.35)),颜色停止0.3rgba255,255,255,0.35)),颜色停止0.3,透明),颜色停止0.7,透明),颜色停止0.7rgba255,255,255,0.35)),rgba255,255,255,0.35)));

  背景图片-webkit-linear-gradientrgba255,255,255,0.350rgba255,255,255,0.3530,透明30,透明70rgba255,255,255,0.3570rgba255,255,255,0.35100;

  background-image-moz-linear-gradientrgba255,255,255,0.350rgba255,255,255,0.3530,透明30,透明70rgba255,255,255,0.3570rgba255,255,255,0.35100;

  background-image-o-linear-gradientrgba255,255,255,0.350rgba255,255,255,0.3530,透明30,透明70rgba255,255,255,0.3570rgba255,255,255 0.35100;

  background-image线性渐变rgba255,255,255,0.350rgba255,255,255,0.3530,透明30,透明70rgba255,255,255,0.3570rgba255,255,255,0.35100;

  背景大小1px  100 ;

  background-repeatno-repeat;

  背景位置500 ;

}

 

input [type =“radio”] hover + label {

  backgroundrgba255,255,255,0.6;

}

input [type =“radio”] checked + label {

  backgroundrgba255,255,255,1;

  -webkit-box-shadow0px  0px  0px  5px  rgba255,255,255,0.3;

  -moz-box-shadow0px  0px  0px  5px  rgba255,255,255,0.3;

  box-shadow0px  0px  0px  5px  rgba255,255,255,0.3;

}

input [type =“radio”] checked + label before {}

 input[type =“radio”] checked ~ figure  img {

  z-index2 ;

  -webkit-transformtranslatex0px;

  -moz-transformtranslatex0px;

  -ms-transformtranslatex0px;

  -o-transformtranslatex0px;

  transformtranslatex0px;

  -webkit-transition:全部。15sz-index0s ;

  -moz-transition:全部。15sz-index 0s ;

  -o-transition:全部。15sz-index 0s ;

  过渡:全部。15sz-index 0s ;

}

input [type =“radio”] checked ~ figure [class * =“entypo-”] :在 {

  z-index3 ;之前

  颜色rgba255,255,255,0.5;

  -webkit-transitioncolor5s ;

  -moz-transition:颜色。5s ;

  -o-transition:颜色。5s ;

  过渡:颜色。5s ;

}

输入[类型= “无线电”] :检查 figcaption {

  z索引8 ;

  -webkit-transformtranslateX0px;

  -moz-transformtranslateX0px;

  -ms-transformtranslateX0px;

  -o-transformtranslateX0px;

  transformtranslateX0px;

  -webkit-transition:全部。35s ,. 7s ;

  -moz-transition:全部。35s ,. 7s ;

  -o-transition:全部。35s ,. 7s ;

  过渡:全部。35s ,. 7s ;

}

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

http://www.codeceo.com/article/mini-css3-timeline-image-player.html
作者:码农网  - 小峰


 
网页设计自学平台 更多文章 跨年晚会连环翻车,这些设计界的车祸事故也不能错过…… (转载)我经历的IT公司面试及离职感受 2018年设计师都收藏的9个实用灵感网站! 干货!不废话!教你如何快速掌握原创字体设计! 为什么我不推荐大家去外包公司
猜您喜欢 【Linux】Linux下高效数据恢复软件extundelete应用实战 硅谷教父皮埃罗独家访谈:创造大数据“杀手级”应用 【825】思维框架 Mysql主从复制常见故障及解决方法 AndroidShareGroup技术周报(第四期)