css3专题动画 |html5 css 鼠标事件

/* 旋转动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 缩放动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation: scale 2s ease-in-out infinite;
}
@keyframes scale {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(2);
}
}
/* 淡入淡出动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation: fadeinout 2s linear infinite;
}
@keyframes fadeinout {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* 移动动画 */
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 200px;
}
100% {
left: 0;
}
}

这些动画效果只是CSS3动画中的冰山一角，想要了解更多的CSS3动画特效，还需要在实际应用中不断探索和实践。同时，引入一些JS动画库，也可以为CSS3动画效果的实现提供更多的灵感和帮助。