文档章节

纯CSS制作焦点图

听那水
 听那水
发布于 2015/03/29 20:16
字数 485
阅读 11
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Python介绍

Python介绍 一、简介 Python是完全面向对象的语言。函数、模块、数字、字符串都是对象。并且完全支持继承、重载等,有益于增强源代码的复用性。Python相对于Lisp这种传统的函数式编程语言,P...

星汉
5分钟前
0
0
VS_设置护眼背景色

工具---->选项---->环境---->字体和颜色:

一个小妞
7分钟前
0
0
Flask跨域请求的处理方法

在Flask开发RESTful后端时,前端请求会遇到跨域的问题。下面是解决方法: 使用 flask-cors库可以很容易的解决 pip install flask-cors 两种方法,一个是全局/批量的,一个是单一独立的: 安全...

ykbj
8分钟前
1
0
Pandas学习记录-Series

系列(Series)是能够保存任何类型的数据(整数,字符串,浮点数,Python对象等)的一维标记数组。轴标签统称为索引。 pandas.Series Pandas系列可以使用以下构造函数创建 - pandas.Series( dat...

kipeng300
16分钟前
0
0
可以实现内网穿透的几款工具

最近没什么事情,看了一些关于内网穿透的文章,因我本身已是做微信开发相关的工作,对这部分关注的比较多,现分享给大家。 首先说下内网穿透的原理。 NAPT原理 在NAT网关上会有一张映射表,表...

哥本哈根的小哥
17分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部