css100个特效 |css三级网页设计

1. 文字浮动效果：
.float-text {
float: left;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% { transform: translatey(0); }
50% { transform: translatey(15px); }
100% { transform: translatey(0); }
}
2. 图片旋转效果：
.rotate-img {
transform: rotate(360deg);
transition: all 2s ease-in-out;
}
.rotate-img:hover {
transform: rotate(0deg);
}
3. 按钮带有阴影效果：
.shadow-btn {
box-shadow: 0 5px 15px rgba(0,0,0,.3);
}
4. 悬浮效果：
.hover-effect {
transform: translateY(-10px);
transition: all .4s ease-in-out;
}
.hover-effect:hover {
transform: translateY(0px);
}
5. 模糊效果：
.blur-effect {
filter: blur(5px);
}
6. 透明度效果：
.opacity-effect {
opacity: .5;
transition: all .3s ease-in-out;
}
.opacity-effect:hover {
opacity: 1;
}
7. 翻转效果：
.flip-effect {
transform: rotateY(180deg);
transition: all .5s ease-in-out;
}
.flip-effect:hover {
transform: rotateY(0deg);
}
8. 3D效果：
.three-d-effect {
transform-style: preserve-3d;
transform: rotateY(180deg);
}
9. 文字变色效果：
.color-effect {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

上面列举的只是100个CSS特效中的一小部分，如果你想掌握更多的CSS技巧，可以继续深入研究，打造出一个更加惊艳的页面！