<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-color: #EBE6E6;
}
/*汉字*/
.characters {
margin-top: 150px;
}
.characters > span {
display: inline-block;
width: 80px;
height: 80px;
font: 500 60px/80px "Microsoft YaHei";
text-align: center;
position: relative;
transform-style: preserve-3d;
}
.characters > span::before, .characters > span::after {
content: attr(data-cont);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
transform-origin: left;
transform: scale(0.96, 1);
transition: all 1s;
}
.characters > span::before {
color: #ccc;
}
.characters:hover span::after {
transform: rotateY(-35deg);
}
.characters:hover span::before {
/*倾斜*/
transform: rotateY(-15deg) skewY(15deg);
}
/*导航*/
.nav {
width: 420px;
height: 30px;
margin: 50px auto;
transform-origin: bottom;
}
ul {
list-style: none;
}
li {
float: left;
transform-style: preserve-3d;
position: relative;
width: 60px;
height: 30px;
transform: rotateX(0deg);
transition: all 0.8s;
}
li > span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font: 400 15px/30px "Microsoft YaHei";
}
li > span:nth-child(1) {
background-color: green;
transform: translateZ(15px);
}
li > span:nth-child(2) {
background-color: yellow;
transform: translateY(-15px) rotateX(90deg);
}
.nav:hover li {
transform: rotateX(-90deg);
}
li:nth-child(2) {
transition-delay: 0.1s;
}
li:nth-child(3) {
transition-delay: 0.2s;
}
li:nth-child(4) {
transition-delay: 0.3s;
}
li:nth-child(5) {
transition-delay: 0.4s;
}
li:nth-child(6) {
transition-delay: 0.6s;
}
li:nth-child(7) {
transition-delay: 0.8s;
}
</style>
</head>
<body>
<div class="characters">
<span data-cont="安">安</span>
<span data-cont="徽">徽</span>
<span data-cont="省">省</span>
<span data-cont="图">图</span>
<span data-cont="书">书</span>
<span data-cont="馆">馆</span>
</div>
<div class="nav">
<ul>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
</ul>
</div>
</body>
</html>