<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>CSS3鼠标悬停动画</title>
<styletype="text/css">
body{
margin:200px;
text-align:center;
font:1em "微软雅黑";
}
ul,ol,li{
list-style-type:none;
vertical-align:0
}
a{
color:#535353;
text-decoration:none
}
a:hover{
color:#D40000;
text-decoration:none
}
.navli {
position:relative;
display:inline-block;
margin-left:-50px;
transition:all 0.4s linear;
}
.navli a {
display:inline-block;
width:90px;
height:90px;
padding:30px;
border-radius: 50%;
border-width:8px;
border-style:solid;
}
.navli:hover {
z-index:11;
transform:scale(1.1);
}
.navli:hover span {
transition:all 0.4s linear;
animation:moveFromBottom 0.3s ease;
}
.navli:nth-child(1) a {
color:#4d9683;
text-shadow:0 1px 0 #9de3cf;
border-color:#549e89;
background-color:#51c9a7;
}
.navli:nth-child(2) a {
color:#be607e;
text-shadow:0 1px 0 #de8ba5;
border-color:#e499b0;
background-color:#e67b9c;
}
.navli:nth-child(3) a {
color:#5e9eb4;
text-shadow:0 1px 0 #adddec;
border-color:#a2cfde;
background-color:#7ec9e3;
}
.navli:nth-child(4) a {
color:#ba9d5e;
text-shadow:0 1px 0 #f5e0ad;
border-color:#dcc999;
background-color:#f0cd78;
}
.navli:nth-child(5) a {
color:#b468a2;
text-shadow:0 1px 0 #e8acd8;
border-color:#d8abcd;
background-color:#dd91cb;
}
.navli:nth-child(1):hover a {
color:#0f775c;
text-shadow:0 1px 0 #81e6c9;
border-color:#0a8462;
background-color:#00c18c;
}
.navli:nth-child(2):hover a {
color:#b12a55;
text-shadow:0 1px 0 #ff95b7;
border-color:#ba335c;
background-color:#ea5180;
}
.navli:nth-child(3):hover a {
color:#2883a2;
text-shadow:0 1px 0 #9cdef2;
border-color:#4397b3;
background-color:#55c1e5;
}
.navli:nth-child(4):hover a {
color:#ab8228;
text-shadow:0 1px 0 #ffe199;
border-color:#b08f3e;
background-color:#f8c64d;
}
.navli:nth-child(5):hover a {
color:#a33689;
text-shadow:0 1px 0 #ec97d6;
border-color:#b7569f;
background-color:#dd70c3;
}
.navspan {
display:block;
line-height:90px;
font-size:30px;
font-style:normal;
position:relative;
}
@keyframesmoveFromBottom {
from{
transform:translateY(120%) scale(0.5);
opacity:0;
}
to{
transform:translateY(0%) scale(1);
opacity:1;
}
}
</style>
</head>
<body>
<divclass="page">
<sectionclass="demo">
<navclass="nav">
<ul>
<li>
<ahref="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span>Home</span></a>
</li>
<li>
<ahref="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span>Phone</span></a>
</li>
<li>
<ahref="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span>Wifi</span></a>
</li>
<li>
<ahref="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span>Setting</span></a>
</li>
<li>
<ahref="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span>Twitter</span></a>
</li>
</ul>
</nav>
</section>
</div>
</body>
</html>
需要web前端课程工具和电子书，可以加群120342833
![Vue.js的常见用法及基本原理 Vue.js 快速入门[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)