看百度知道時，看到一個左右搖擺的“獎”圖，感覺挺有意思，就順手玩下， 以后可能會用到，是不
效果如下：
代碼如下：
#answer-bar{
display:block;
position: relative;
width: 90px;
height: 34px;
background: url('write.png') 4px center no-repeat #4dc86f;
border-radius: 4px;
font-size: 14px;
text-align: center;
color: #fff;
line-height: 34px;
cursor: pointer;
margin:100px auto;
background-size: 20px 20px;
}
#answer-bar:after{
position: absolute;
left: 73px;
bottom: 7px;
display: block;
width: 35px;
height: 40px;
background: url(a.png) no-repeat;
background-size: 100% 100%;
content: "";
animation-name: upAnimation;
transform-origin: center bottom;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-delay: .5s;
}
@keyframes upAnimation {
0% {
transform:rotate(0deg);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
10% {
transform:rotate(-12deg);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
20% {
transform:rotate(12deg);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
28% {
transform:rotate(-10deg);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
36% {
transform:rotate(10deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
42% {
transform:rotate(-8deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
48% {
transform:rotate(8deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
52% {
transform:rotate(-4deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
56% {
transform:rotate(4deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
60% {
transform:rotate(0deg);
transition-timing-function:cubic-bezier(0.755,.5,.855,.06)
}
100% {
transform:rotate(0deg);
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
}<div id="answer-bar">我來答</div>
用到的兩張小圖：
