纯CSS制作焦点图
纯CSS制作焦点图
听那水 发表于3年前
纯CSS制作焦点图
  • 发表于 3年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 当你打开百度,谷歌,这些首页的时候,是否为那些漂亮的焦点图而啧啧称奇,现在,你不用去羡慕他们,因为,当你看完这篇博文,那些效果,你也可以随手拈来!好了,干正事:

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
×
听那水
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: