Q弹的动力球
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹力球</title>
</head>
<body>
<link rel="stylesheet" href="css/common.css">
<div class="circular title">关于我们</div>
</body>
</html>
common.css
.circular{
width:85px;
height:85px;
border-radius:50%;
border:1px solid #ccc;
box-shadow:inset 0 0 20px rgba(255,0,255,.6),0 0 5px rgba(0,0,0,.4);
line-height:85px;
text-align:center;
cursor: pointer;
background:rgba(192,192,192,0.2);
animation:roundc 3.2s linear infinite;/* ease-in-out */
webkit-animation:3.2s linear infinite;
position:fixed;
right:20px;
top:20px;
padding:10px;
}
.title{
font-size:14px;
}
@keyframes roundc{
20%{
padding:5px 15px;
right:150px;
top:60px;
}
40%{
padding:0px 20px;
right:120px;
top:120px
}
60%{
padding:10px 10px;
top:60px;
right:80px;
}
80%{
padding:20px 5px;
top:90px;
right:90px
}
90%{
padding:15px 7px;
}
100%{
padding:10px;
top:20px;
right:20px;
}
}
@-webkit-keyframes roundc {
20%{
padding:5px 10px;
}
40%{
padding:0px 20px;
}
60%{
padding:10px 10px;
}
80%{
padding:20px 5px;
}
90%{
padding:15px 7px;
top:100px;
right:120px;
}
100%{
padding:10px;
top:20px;
right:20px;
}
}
