风琴导航

开发工具：DW
内容关于：CSS3
作者：曾震宇
撰写时间：2019.1.18

这是一个CSS3动画，根据时间差来完成一个动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>风琴导航</title>
</head>
<style>
	a{
		text-decoration:none;
	}
	.litle{
	width:140px;
	height: 448px;
	position: fixed;
	top: 0px;
	cursor: pointer;
}
.litle a{
	display: block;
	background: #ffffff;
	width: 140px;
	height: 30px;
	margin-bottom: 2px;
	line-height: 30px;
	font-size: 12px;
	color:black;
	transform:translateX(140px);
	transition:  0.3s ease;
}
.litle a em{
	display:inline-block;
	width:30px;
	height: 30px;
	text-align: center;
	font-size: 15px;
	background: #39A4DC;
	color:white;
}
.litle a .red{
	background:red;
}
.litle a em:hover{
	background:green;
}
.litle:hover a{
	transform: translateX(0px);
}
.litle a:nth-of-type(1){
	transition-delay:0.1s;
}
.litle a:nth-of-type(2){
	transition-delay:0.15s;
}
.litle a:nth-of-type(3){
	transition-delay:0.25s;
}
.litle a:nth-of-type(4){
	transition-delay:0.1s;
}
.litle a:nth-of-type(5){
	transition-delay:0.15s;
}
.litle a:nth-of-type(6){
	transition-delay:0.25s;
}
.litle a:nth-of-type(7){
	transition-delay:0.1s;
}
.litle a:nth-of-type(8){
	transition-delay:0.7s;
}
.litle a:nth-of-type(9){
	transition-delay:0.15s;
}
.litle a:nth-of-type(10){
	transition-delay:0.25s;
}
.litle a:nth-of-type(11){
	transition-delay:0.1s;
}
.litle a:nth-of-type(12){
	transition-delay:0.15s;
}
.litle a:nth-of-type(13){
	transition-delay:0.25s;
}
.litle a:nth-of-type(14){
	transition-delay:0.1s;
}
	</style>
<body>
<div class="litle">
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">导航<em>嗯</em></a>
			<a href="">风&nbsp;&nbsp;<em>1</em></a>
			<a href="">琴&nbsp;&nbsp;<em>2</em></a>
			<a href="">导&nbsp;&nbsp;<em>3</em></a>
			<a href="">航&nbsp;&nbsp;<em class="red">嗯</em></a>
		</div>
</body>
</html>

猜你喜欢