css 页面常用动画 |html5追加css声明

1. 渐变过渡

.box {
background-color: red;
transition: background-color 1s ease;
}
.box:hover {
background-color: blue;
}

鼠标悬停时，背景颜色由红色过渡到蓝色。

2. 位移动画

.box {
position: relative;
}
.box:hover {
transform: translateX(50%);
transition: transform 1s ease;
}

鼠标悬停时，元素向右移动50%。

3. 旋转动画

.box {
transform: rotate(0deg);
transition: transform 1s ease;
}
.box:hover {
transform: rotate(360deg);
}

鼠标悬停时，元素顺时针旋转360度。

4. 缩放动画

.box {
transform: scale(1);
transition: transform 1s ease;
}
.box:hover {
transform: scale(1.5);
}

鼠标悬停时，元素放大1.5倍。

5. 切换动画

.tab {
display: none;
}
.tab.active {
display: block;
animation: fade-in 1s ease;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

通过添加和删除.active类，切换元素的显示状态，并使用渐变效果使切换更加流畅。