纯CSS制作焦点图

最新推荐文章于 2022-06-08 20:37:34 发布

weixin_33713707

最新推荐文章于 2022-06-08 20:37:34 发布

阅读量413

点赞数

文章标签： python

原文链接：https://my.oschina.net/ListenWater/blog/393336

版权

2019独角兽企业重金招聘Python工程师标准>>>

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;
}

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

转载于:https://my.oschina.net/ListenWater/blog/393336