使用纯CSS3实现时间轴切换焦点图实例代码

程序猿 • 2025年12月23日 21:30:45 • 好文分享 • 阅读 0

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

在线演示源码下载

HTML代码：

@@##@@
Fabio Basile
iPhone 6 Infinity
@@##@@
Brian Miller
TypeTi.me
@@##@@
Nicolas Quod
Iphone 6 - Notification - iOS 7
@@##@@
Joffrey
功能齐全
立即学习“前端免费学习笔记（深入）”；

Studio Global
Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405

查看详情
@@##@@
Jared Long
Don't drop your iPhone Infinity
@@##@@
Charles Treece
iPhone 6 Infinity Side Status Bar

CSS代码

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

#gal {  position:relative;  width:600px;  height:300px;  margin:0 auto;  top:100px;  background:white;  -webkit-box-shadow:0px 0px 0px 10px white,             5px 5px 0px 10px rgba(0,0,0,0.1);  -moz-box-shadow:0px 0px 0px 10px white,             5px 5px 0px 10px rgba(0,0,0,0.1);  box-shadow:0px 0px 0px 10px white,             5px 5px 0px 10px rgba(0,0,0,0.1);  -webkit-transform:translate3d(0, 0, 0);  -moz-transform:   translate3d(0, 0, 0);  -ms-transform:    translate3d(0, 0, 0);  -o-transform:     translate3d(0, 0, 0);  transform:        translate3d(0, 0, 0);}#gal:after {  content:'';  position:absolute;  bottom:24px;  right:0;  left:0;  width:100%;  height:1px;  background:rgba(255,255,255,0.35);  z-index:3;}#gal ul {list-style-type:none;}input[type="radio"], input[type="radio"] + label {  position:absolute;  bottom:15px;  display:block;  width:20px;  height:20px;  -webkit-border-radius:50%;  -moz-border-radius:50%;  border-radius:50%;  cursor:pointer;}input[type="radio"] {  opacity:0;  z-index:9;}input[value="one"], input[value="one"] + label {left:20px;}input[value="two"], input[value="two"] + label {left:128px;}input[value="three"], input[value="three"] + label {left:236px;}input[value="four"], input[value="four"] + label {left:344px;}input[value="five"], input[value="five"] + label {left:452px;}input[value="six"], input[value="six"] + label {right:20px;}input[type="radio"] + label {  background:rgba(255,255,255,0.35);  z-index:7;  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);  -webkit-transition:all .3s;  -moz-transition:all .3s;  -o-transition:all .3s;  transition:all .3s;}[class*="entypo-"]:before {  position:absolute;  font-family: 'entypo', sans-serif;}figure[class*="entypo-"]:before {  left:10px;  top:5px;  font-size:2rem;  color:rgba(255,255,255,0);  z-index:1;  -webkit-transition:color .1s;  -moz-transition:color .1s;  -o-transition:color .1s;  transition:color .1s;}a[class*="entypo-"]:before {  top:8px;  left:9px;  font-size:1.5rem;  color:white;}a:hover[class*="entypo-"]:before {  color:white;}figure, figure img, figcaption {  position:absolute;  top:0;  right:0;}figure {  bottom:0;  left:0;  width:600px;  height:300px;  display:block;  overflow:hidden;}figure img {  bottom:0;  left:0;  display:block;  width:600px;  height:300px;  z-index:1;  -webkit-transform:translateX(600px);  -moz-transform:translateX(600px);  -ms-transform:translateX(600px);  -o-transform:translateX(600px);  transform:translateX(600px);  -webkit-transition:all .15s .15s, z-index 0s;  -moz-transition:all .15s .15s, z-index 0s;  -o-transition:all .15s .15s, z-index 0s;  transition:all .15s .15s, z-index 0s;}figcaption {  display:block;  width:270px;  height:300px;  padding-top:20px;  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);  background-size:600px 600px;  background-repeat:no-repeat;  background-position:-300px -150px;  text-align:center;  z-index:3;  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  -webkit-transform:translateX(300px);  -moz-transform:translateX(300px);  -ms-transform:translateX(300px);  -o-transform:translateX(300px);  transform:translateX(300px);  -webkit-transition:all .35s;  -moz-transition:all .35s;  -o-transition:all .35s;  transition:all .35s;}h4 {  display:inline-block;  padding:0 15px;  color:white;  font-family: 'Titillium Web', sans-serif;  font-weight:300;  font-size:2rem;}figcaption nav ul {display:block;padding-top:10px;}figcaption nav ul li {display:inline-block;margin-left:5px;}figcaption nav ul li a {  position:relative;  display:block;  width:40px;  height:40px;  background:rgba(255,255,255,0.2);  text-decoration:none;  color:white;  -webkit-border-radius:50%;  -moz-border-radius:50%;  border-radius:50%;  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);  -webkit-transition:all .15s;  -moz-transition:all .15s;  -o-transition:all .15s;  transition:all .15s;}figcaption nav ul li a:hover {  background:rgba(255,255,255,0);  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);}figcaption p {  padding:50px 15px;  font-family:'Titillium Web', sans-serif;  font-weight:300;  color:#333;  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-size:1px 100%;  background-repeat:no-repeat;  background-position:50% 0%;}input[type="radio"]:hover + label {  background:rgba(255,255,255,0.6);}input[type="radio"]:checked + label {  background:rgba(255,255,255,1);  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);}input[type="radio"]:checked + label:before {}input[type="radio"]:checked ~ figure img {  z-index:2;  -webkit-transform:translatex(0px);  -moz-transform:translatex(0px);  -ms-transform:translatex(0px);  -o-transform:translatex(0px);  transform:translatex(0px);  -webkit-transition:all .15s, z-index 0s;  -moz-transition:all .15s, z-index 0s;  -o-transition:all .15s, z-index 0s;  transition:all .15s, z-index 0s;}input[type="radio"]:checked ~ figure[class*="entypo-"]:before {  z-index:3;  color:rgba(255,255,255,0.5);  -webkit-transition:color .5s;  -moz-transition:color .5s;  -o-transition:color .5s;  transition:color .5s;}input[type="radio"]:checked ~ figure figcaption {  z-index:8;  -webkit-transform:translateX(0px);  -moz-transform:translateX(0px);  -ms-transform:translateX(0px);  -o-transform:translateX(0px);  transform:translateX(0px);  -webkit-transition:all .35s, .7s;  -moz-transition:all .35s, .7s;  -o-transition:all .35s, .7s;  transition:all .35s, .7s;}

以上就是使用纯CSS3实现时间轴切换焦点图实例代码的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608111.html

css3 焦点图

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

407.0K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

使用纯CSS打造可折叠树状菜单方法介绍

上一篇 2025年12月23日 21:30:29

使用CSS3实现百叶窗焦点图动画实例代码

下一篇 2025年12月23日 21:30:51

使用纯CSS3人物行走动画实例代码

今天分享给大家的是一个用纯css3实现的人物行走动画，在没有使用javascript的情况下，用css3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用css3的动画属性将这些图片串联起来形成人物行走动画效果。在线演示源码下载 HTM…

程序猿
好文分享 2025年12月23日
0000
好文分享

使用CSS3实现百叶窗焦点图动画实例代码

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

程序猿
2025年12月23日
0000
CSS3四中属性解析（变形、过渡、动画、关联）

一、变形 transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例： transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45…

程序猿
好文分享 2025年12月23日
0000
CSS3中content的属性详解

css中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字 content : ”插入的文章”，或者 content:none 不插入内容 #html…

程序猿
好文分享 2025年12月23日
0000
教你玩转CSS3的3D效果

css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2d事物，从而展现3d的效果。旋转则不再是2d平面上的旋转，而是三维坐标系的旋转，就包括x轴，y轴，z轴旋转。平移同理。…

程序猿
2025年12月23日 • 好文分享
0000
使用CSS3媒体查询方法总结

首先我们在使用media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：准备工作1：设置Meta标签这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：…

程序猿
好文分享 2025年12月23日
0000
纯CSS3写的10个不同的酷炫图片遮罩层效果

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果，可以欣赏一下实例代码纯CSS3写的10个不同的酷炫图片遮罩层效果 @@##@@ PHP中SESSION和COOKIE基本用法在项目中我们会经常用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会…

程序猿
2025年12月23日 • 好文分享
0000
CSS3中的变形与动画详细说明

　　最近在学习制作移动端的页面，做了一个微信页面的小demo，其中用到了很多的CSS3新增的内容，其中就有CSS3新增的变形和动画。其实这种CSS3的动画效果用JS也可以实现，不过CSS3能开启硬件加速，性能更好。　　（下面均没写浏览器前缀，如有需要请自行添加~~） CSS3常见的动画效果的实现…

程序猿
好文分享 2025年12月23日
0000
好文分享

使用CSS实现Footer置底的五种方式

页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。方法一：将内容部分的margin-bottom设为负数 footer htm…

程序猿
2025年12月23日
0000
使用CSS3时限随内容自动伸缩的背景

css3给我们带来一个非常实用的新属性：border-image，利用这个属性我们可以做出随着内容的增减自动伸缩的背景。废话不多说，看代码！html: 第一条列表内容第二条列表内容第三条列表内容第四条列表内容第五条列表内容 css：border: 20…

程序猿
2025年12月23日 • 好文分享
0000
详解CSS3背景相关样式实例代码

这篇文章详解css3背景相关样式实例代码 background-image绘制多张图片叠加，示例如下: background-image绘制多张图片叠加 div{ width:1100px; height:800px; background-image: url(“../../image/icon1…

程序猿
好文分享 2025年12月23日
0000
利用纯css3实现圆形从中心向四周扩散动画效果代码

先来个简单的示例，例如： @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 效果：http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则，创建动画。创建动画的原理是，…

程序猿
好文分享 2025年12月23日
0000
分享一个FlexBox标准及兼容写法速查表

以上就是分享一个FlexBox标准及兼容写法速查表的详细内容，更多请关注创想鸟其它相关文章！

程序猿
好文分享 2025年12月23日
0000
好文分享

利用CSS3实现头像旋转效果实例代码

本篇文章主要介绍了css3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧鼠标未放上效果：鼠标放上之后旋转效果： transition: all 2.0s;表示所有的属性变换在2秒内完成； transform: rotate(360deg);表示图片旋…

程序猿
2025年12月23日
0000
解析CSS3中nth-child与nth-of-type的区别

css3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是…

程序猿
2025年12月23日 • 好文分享
0000
好文分享

CSS3让登陆面板3D旋转起来实例代码

点击登陆面板会发生360度旋转，并显示信息，真正使用css3让登陆面板3d旋转起来，如何实现登陆面板3d旋转，感兴趣的小伙伴们可以参考一下本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下效果图：点击登陆，登陆面板会发生360度旋转，并显示信息。旋转…

程序猿
2025年12月23日
0000
使用CSS3过渡transition效果实例介绍

这篇文章主要为大家详细介绍了css3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下效果图：实现代码： transition.html 立即学习“前端免费学习笔记（深入）”； T…

程序猿
2025年12月23日 • 好文分享
0000
好文分享

详解CSS3 RGBA色彩模式使用实例代码

这篇文章主要以设计带有阴影边框的表单为例，为大家介绍了css3 rgba色彩模式使用方法，感兴趣的小伙伴们可以参考一下 RGBA色彩模式是RGB色彩模式的扩展，在红，蓝，绿三原色的基础上增加了不透明度参数。语法如下： rgba（r,g,b,）其中r,g,b表示红色，蓝色，绿色三种原色所占的比重。其…

程序猿
2025年12月23日
0000
使用CSS3的box-shadow属性制作边框阴影效果的方法

这篇文章主要介绍了css3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下效果演示： box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera…

程序猿
2025年12月23日 • 好文分享
0000
CSS3的opacity属性带来的层叠顺序问题解决方法

这篇文章主要介绍了解决css3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity …

程序猿
2025年12月23日 • 好文分享
0000

发表回复

登录后才能评论

使用纯CSS3实现时间轴切换焦点图实例代码

HTML代码：

CSS代码

关于作者

相关推荐

发表回复