2016/03/09 codes
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{width: 400px;
height: 300px;
border: 1px #cccccc solid;
margin: 30px auto;
position: relative;}
.ball{
width:140px;
height: 140px;
background: linear-gradient(top,white,grey);
background: -webkit-linear-gradient(top,white,grey);
position: absolute;
top: 0;
left: 50%;
margin-left:-70px;
border-radius:50%;
box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999,;
animation:jump 1s ease-in-out infinite;
-webkit-animation:jump 1s ease-in-out infinite;
z-index: 1;;
}
@keyframes jump{
0%{
top:0;
}
65%{
top:160px;
height: 140px;
}
75%{
height: 120px;
top:0;
}
100%{
top:0;
height: 140px;
}
}
@-webkit-keyframes jump{
0%{
top:0;
}
65%{
top:160px;
height: 140px;
}
75%{
height: 120px;
top:0;
}
100%{
top:0;
height: 140px;
}
}
.shadow{width:90px ;
height: 60px;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -45px;
background: rgba(20,20,20,0.1);
box-shadow: 0 0 25px rgba(20,20,20,0.1);
transform:scaleY(0.3);
animation:shrink 1s ease-in-out infinite;
-webkit-animation:shrink 1s ease-in-out infinite;
}
@keyframes shrink{
0%{
width: 90px;
height: 60px;
}
65%{
width: 10px;
height: 5px;
margin-left: -5px;
background-color: rgba(20,20,20,0.3);
box-shadow: 0 0 25px 20px rgba(20,20,20,0.3);
}
100%{
width: 90px;
height: 60px;
background-color: rgba(20,20,20,0.1);
box-shadow: 0 0 25px 20px rgba(20,20,20,0.1);
}
}
@-webkit-keyframes shrink{
0%{
width: 90px;
height: 60px;
}
65%{
width: 10px;
height: 5px;
margin-left: -5px;
background-color: rgba(20,20,20,0.3);
box-shadow: 0 0 25px 20px rgba(20,20,20,0.3);
}
100%{
width: 90px;
height: 60px;
background-color: rgba(20,20,20,0.1);
box-shadow: 0 0 25px 20px rgba(20,20,20,0.1);
}
}
</style>
</head>
<body>
<div class="box">
<div class="ball"></div>
<div class="shadow"></div>
</div>
</body>
</html>
/*********************导航条*********************/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: "黑体";
font-size: 16px;
}
a,a:hover,a:focus,a:visited{
text-decoration: none;
}
.nav{
/*border: 1px grey solid;*/
text-align:center;
margin-top: 10px;
}
.nav .container{
position: relative;
display: inline-block;
border-bottom:2px red solid ;
}
.nav .container a{
color: black;
float: left;
padding:15px 45px;
/*border: 1px red solid;*/
position: relative;
}
.nav .container a:hover{
color: red;
}
.nav .container a:after{
content: "";
width: 7px;
height: 7px;
background-color: red;
border-radius: 50%;
/*top:-5px;*/
left: 50%;
position: absolute;
bottom: -5px;
}
.nav .container .Dot{
content: "";
width: 11px;
height: 11px;
background-color: red;
border-radius: 50%;
position: absolute;
top:45px;
left: -90px;
opacity: 1;
transition:1s ease-in-out;
-webkit-transition:1s ease-in-out;
}
.nav .container a:first-child:hover~.Dot{
left:10%;
}
.nav .container a:nth-child(2):hover~.Dot{
left:33%;
}
.nav .container a:nth-child(3):hover~.Dot{
left:60%;
}
.nav .container a:nth-child(4):hover~.Dot{
left:86%;
}
</style>
</head>
<body>
<nav class="nav">
<div class="container">
<a href="#">首页</a>
<a href="#">公司简介</a>
<a href="#">产品发布</a>
<a href="#">人才招聘</a>
<div class="Dot"></div>
</div>
</nav>
</body>
</html>
浙公网安备 33010602011771号