1.翻转:关键是加 perspective,有3d的翻转效果
.compose-img{
width: 220px;
height: 330px;
margin: 10px auto;
animation: miss 1.3s ease;
}
@keyframes miss {
from{}
to{transform: perspective(600px) rotateY(360deg) scale(1.2);}
}
2.放大:使用position实现更好
.shunk{
animation: print 1s 1 ease-in-out;
}
@keyframes print {
0% {
position: relative;
transform: scale(1);
}
100%{
position: absolute;
left: 0;
right: 0;
transform: scale(10);
}
}
3.缩小:
.scale{
animation: print 1s 1 ease-in-out;
}
@keyframes print {
0% {
position: absolute;
transform: scale(10);
}
100%{
position: relative;
}
}
4.左右摇晃:选中中心点,保持中心点不动
.shake-reward {
animation: music-move 500ms 500ms infinite alternate ease-in-out;
}
@keyframes music-move {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 100%;
}
25% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
transform-origin: 50% 100%;
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 100%;
}
75% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
transform-origin: 50% 100%;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 100%;
}
}