CSS3动画是网页设计里比较常见的元素之一,它能够让网页看起来更加生动、活泼。下面我们将介绍一些CSS3动画效果。
1. 翻转效果
.card {
transform-style: preserve-3d;
transition: transform 1s;
}
.card.is-flipped {
transform: rotateY(180deg);
}2. 缩放效果
.box:hover {
transform: scale(1.1);
transition: .3s ease-in-out;
}3. 移动效果
.box {
position: relative;
left: 0;
top: 0;
transition: .3s ease-in-out;
}
.box:hover {
left: 50px;
top: 50px;
}4. 淡入淡出效果
.fade {
opacity: 0;
transition: opacity .5s ease-out;
}
.fade:hover {
opacity: 1;
}5. 旋转效果
.spin {
transform: rotate(0deg);
transition: transform .5s ease-out;
}
.spin:hover {
transform: rotate(360deg);
}总之,CSS3动画是网页设计中重要的一环。以上几种动画效果只是冰山一角,有了这些基础的动画效果,我们可以发挥想象,创造出更加生动、优美的网页设计。