文档章节

纯CSS制作焦点图

听那水
 听那水
发布于 2015/03/29 20:16
字数 485
阅读 11
收藏 0
点赞 0
评论 0

css焦点图的思想是:利用顶层的小焦点,调动位于底层的背景的变化:

让我们来想看看效果,一睹为快:


1、先在<body>体中添加如下代码:

<div id="kuangjia">
	<ul>
		<li><a href="#bg1"><img src="sbg1.jpg" /></a></li>
		<li><a href="#bg2"><img src="sbg2.jpg" /></a></li>
		<li><a href="#bg3"><img src="sbg3.jpg" /></a></li>
		<li><a href="#bg4"><img src="sbg4.jpg" /></a></li>
		<li><a href="#bg5"><img src="sbg5.jpg" /></a></li>
	</ul>
</div>
	<img src="bg1.jpg" class="bg one" id="bg1" />
	<img src="bg2.jpg" class="bg two" id="bg2" />
	<img src="bg3.jpg" class="bg three" id="bg3" />
	<img src="bg4.jpg" class="bg four" id="bg4" />
	<img src="bg5.jpg" class="bg five" id="bg5" />

2、对小焦点和大背景分别进行样式设置:

/* CSS Document */

*{padding:0px; margin:0px;}

html,body{height:100%;}

.bg{
	position:fixed;
	width:100%;
	z-index:1;
	margin:0px;
}

#kuangjia{
	position:absolute;
	text-align:center;
	width:900px;
	height:100px;
	left:50%;
	margin-left:-450px;
	bottom:30px;
	z-index:999;
}

#kuangjia li{
	display: inline;
}

#kuangjia img{
	position:relative;
	display:inline;
	width:100px;
	height:100px;
	padding:0px;
	margin-right:50px;
	border:3px solid #FFF;
	border-radius:50%;
}
/*----------------------以下是动作路径----------------------------*/
@-webkit-keyframes ONE {
	0% { -webkit-transform:translate(-1200px,0px); }
	100% { -webkit-transform:translate(0px,0px); }
}

.one:target {
	z-index: 100;
	-webkit-animation: ONE 1s;
}

@-webkit-keyframes TWO {
	0% { -webkit-transform:translate(1200px,0px); }
	100% { -webkit-transform:translate(0px,0px); }
}

.two:target {
	z-index: 100;
	-webkit-animation: TWO 1s;
}
@-webkit-keyframes THREE {
	0% { -webkit-transform:translate(0px,600px); }
	100% { -webkit-transform:translate(0px,0px); }
}

.three:target {
	z-index: 100;
	-webkit-animation: THREE 1s;
}
@-webkit-keyframes FOUR {
	0% { -webkit-transform:translate(0px,-600px); }
	100% { -webkit-transform:translate(0px,0px); }
}

.four:target {
	z-index: 100;
	-webkit-animation: FOUR 1s;
}
@-webkit-keyframes FIVE {
	0% { -webkit-transform:translate(-1200px,0px) skew(-60deg,0deg) scale(1,0.6); }
	100% { -webkit-transform:translate(0px,0px) skew(0deg,0deg) scale(1,1); }
}

.five:target {
	z-index: 100;
	-webkit-animation: FIVE 1s;
}

@-webkit-keyframes NO {
	0% { z-index: 75; }
	100% { z-index: 75; }
}
 
.bg:not(:target) {
	-webkit-animation: NO 1s;
}

由于这篇博文重点是讲述焦点图,故对于背景进出的动作路径不进行详细介绍,感兴趣的同学可以在我的其他博文中进行查阅。




© 著作权归作者所有

共有 人打赏支持
听那水
粉丝 1
博文 9
码字总数 4697
作品 0
青岛
网页/平面设计
程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农
01/08
0
0
好玩儿 的 javascript

非常平滑的JS图片滚动特效代码,无缝循环 http://www.codefans.net/jscss/code/255.shtml 强烈推荐的一款CSS导航菜单 http://www.codefans.net/jscss/code/768.shtml 纯CSS下拉菜单代码http:...

曦羽
2017/10/05
0
0
HTML5/CSS3 3D图片播放器 可360度旋转图片

HTML5/CSS3 3D图片播放器 可360度旋转图片 HTML5资源教程2017-12-231 阅读 HTML53D 记得之前给大家分享过一些超炫酷基于jQuery和 HTML5 的3D焦点图图片播放器,很多还是不错的,比如 jQuery...

HTML5资源教程
2017/12/23
0
0
使用 HTML5 和 CSS3 制作登录页面完整步骤

本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程。 View demo login.html 所用到的 HTML5 的特性: placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动...

小编辑
2011/09/22
34.3K
25
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.1K
5
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
539
1
10 个基于 jQuery/CSS3 的图片特效

jQuery作为理想的开源Javascript开发库,已经被广大前端开发者所接受和使用,由jQuery编写的图片插件也数不胜数。CSS3是最近几年刚兴起的新技术,CSS3的应用,可以让图片拥有非常绚丽的特效,...

ruby_chen
2013/10/26
591
0
21 个新鲜的 CSS 3 教程与技巧

CSS3 已经变得很流行。大部分的浏览器比如IE7、IE8、Safari、Firefox和Chrome,都支持新的CSS3属性。CSS3有非常多的web和移动方面的功能。 本文列出21个新鲜的CSS3教程和技巧,供大家学习、交...

老枪
2011/05/25
3.7K
5
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.3K
5
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA @MappedSuperclass 注解说明

基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclass注解将实体类的多个属性分别封装到不同的非实体类中。 1.@MappedSuperclass注解只能标准在类上:@Target({java.lang....

海博1600
7分钟前
0
0
Scala Configuration 相关API

Play使用了 Typesafe config library,但是也提供了一个有着更多Scala高级特性的的 Configuration 封装。不熟悉Typesafe配置的开发者可以移步 configuration文件的语法和特性文档。 读取配置...

Landas
今天
1
0
使用cookie技术 记住账号

1. 效果 2. 实现过程 2.1 前端 将用户的选中传递给后台 这个参数的获取是 参考:https://my.oschina.net/springMVCAndspring/blog/1860498 // var rememberLogin = $("#rememberLoginId").i...

Lucky_Me
今天
1
0
《趣谈网络协议》02之网络分层的真实含义

一、提出问题 1.提出问题 当你听到什么二层设备、三层设备、四层 LB 和七层 LB 中层的时候,是否有点一头雾水,不知道这些所谓的层,对应的各种协议具体要做什么“工作”? 2.这四个问题你弄...

aibinxiao
今天
2
0
Python3学习日志二 Python中的集合set和字典dict

1.集合set 定义一个集合set 我们可以看到定义集合set有两种不同的形式,如果要定义一个空的集合set不能用{}而是要用set();另外,集合是无序的,而且set中的元素是不可重复的,如果你定义了一...

Mr_bullshit
今天
0
0
adb 操作指令详解

ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具。 注:有部分命令的支持情况可能与 Android 系统版本及定制 ROM 的实现有关。...

孟飞阳
今天
0
0
nodejs安装以及环境配置(很好的node安装和配置文章,少走很多弯路)

一、安装环境 1、本机系统:Windows 10 Pro(64位) 2、Node.js:v6.9.2LTS(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2、选安装目录进...

sprouting
今天
1
0
Redisson

了解了Redisson,发现使用挺简单的,接下来准备深入学习一下。 Redisson介绍 Redisson是架设于Redis基础之上的一个Java驻内存数据网格(In-Memory Data Grid) Redisson在基于NIO的Netty框架上...

to_ln
今天
0
0
python有哪些好玩的应用实现,用python爬虫做一个二维码生成器

python爬虫不止可以批量下载数据,还可以有很多有趣的应用,之前也发过很多,比如天气预报实时查询、cmd版的实时翻译、快速浏览论坛热门帖等等,这些都可以算是爬虫的另一个应用方向! 今天给...

python玩家
今天
0
0
python爬虫日志(3)-爬去异步加载网页

在浏览器检查元素页面中,选取Network中的XHR选项即可观察每次加载页面,网页发出的请求,观察url的规律即可利用封装的函数对每一页进行爬取。

茫羽行
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部