1、上下滑动
#award {
position: absolute;
top: 30px;
left: 365px;
-webkit-animation: move 10s infinite alternate;
animation: move 10s infinite alternate;
}
@-webkit-keyframes move {
0% {top: 30px;}
100% {top:60px;}
}
@keyframes move {
0% {top: 30px;}
100% {top:60px;}
}
2、左右摆动
#award {
position: absolute;
top: 30px;
left: 365px;
-webkit-animation: shake 10s infinite;
animation: shake 10s infinite;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@-webkit-keyframes shake{
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}
@keyframes shake{
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(10deg); }
}
3、锤子效果
.hammer .imgChuiZi {
position: absolute;
top: 0;
right: 30px;
width: 100%;
z-index: 10002;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom 100%;
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-moz-animation: chuizi 1.5s ease 9999;
-webkit-animation: chuizi 1.5s ease 9999;
animation: chuizi 1.5s ease 9999;
}
@keyframes chuizi {
0% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
30% {
-moz-transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
100% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
@-webkit-keyframes chuizi {
0% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
30% {
-moz-transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
100% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
@-moz-keyframes chuizi {
0% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
30% {
-moz-transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
100% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}