利用css3动画,做一个鼠标经过图标,旋转360°的小特效
利用css3动画效果,做的一个平滑过渡的小特效,3d旋转的特效
------------------------------------------------
动画设置:
@keyframes xuanzhuan {
from {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
animation-timing-function: linear;
}
20% {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -300deg);
animation-timing-function: linear;
}
40% {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -240deg);
animation-timing-function: linear;
}
60% {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
animation-timing-function: linear;
}
80% {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -60deg);
animation-timing-function: linear;
}
to {
transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);;
animation-timing-function: linear;
}
}
调用:
<style> .demo { width: 100px; text-align: center; } .demo:hover { animation: xuanzhuan 0.5s 1; -webkit-animation: xuanzhuan 0.5s 1; -moz-animation: xuanzhuan 0.5s 1; } </style> <h1 class="demo">s</h1>