淘先锋技术网

首页 1 2 3 4 5 6 7

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动画是网页设计中重要的一环。以上几种动画效果只是冰山一角,有了这些基础的动画效果,我们可以发挥想象,创造出更加生动、优美的网页设计。