CSS3实现左右摆动和上下滑动

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);}
}