文档章节

纯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
神奇的选择器 :focus-within

CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时...

chokcoco
08/02
0
0
使用 HTML5 和 CSS3 制作登录页面完整步骤

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

小编辑
2011/09/22
36.7K
25

没有更多内容

加载失败,请刷新页面

加载更多

性能优化(JVM概念及配置)

虚拟机组成 一次编写,到处运行 Java虚拟机是对操作系统的模拟,隔离差异 2018编程语言排行榜 一个复杂的构架 虚拟机的内部概念 运行原理 编译器,解释器执行流程 内存分配-线程模型 栈帧模型...

这很耳东先生
7分钟前
0
0
Scala之初步认识与环境准备

1. 了解 Scala 1.1. 什么是 Scala Scala 是 Scalable Language 的简写,是一门多范式的编程语言。 Scala设计的初衷是要集成面向对象编程和函数式编程的各种特性。Scala运行于Java平台(Java虚...

飞鱼说编程
28分钟前
3
0
Vue项目分环境打包的实现步骤

在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能...

peakedness丶
28分钟前
3
0
vue+lowdb+express

搭建流程: 1.安装Node.js; 2.安装npm; 3.安装Express; 搭建流程 npm install -g express 安装 express 生成器 npm install -g express-generator 查看是否安装成功,随便输的一个命令...

Js_Mei
33分钟前
2
0
Qt那些事0.0.15

以下与Q_DECLARE_METATYPE相关内容全部是翻译自Qt文档。参看QVariant Class | Qt Core 5.9以及QMetaType Class | Qt Core 5.9 QVariant QVariant::fromValue(const T& value) 返回一份包含v......

Ev4n
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部