淘先锋技术网

首页 1 2 3 4 5 6 7

CSS动画效果是现代网页设计中不可或缺的部分,好看的CSS动画可以吸引用户的眼球,提高网站的用户体验。下面将为大家介绍几个好看的CSS动画效果。

/* 1.闪烁效果 */
@keyframes blink {
50% {
opacity: 0.3;
}
}
.blink {
animation: blink 1s ease-in-out infinite;
}
/* 2.抖动效果 */
@keyframes shake {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(-10px, 0);
}
40% {
transform: translate(10px, 0);
}
60% {
transform: translate(-10px, 0);
}
80% {
transform: translate(10px, 0);
}
100% {
transform: translate(0, 0);
}
}
.shake {
animation: shake 1s ease-in-out infinite;
}
/* 3.旋转效果 */
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotate 2s infinite linear;
}
/* 4.渐变效果 */
@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
.gradient {
animation: gradient 2s linear infinite;
background: linear-gradient(to left, red, orange, yellow, green, blue, purple);
background-size: 600% 600%;
}

以上是介绍的几个好看的CSS动画效果,使用它们可以让网页更加生动有趣,但同时需要注意过度使用会影响网站的性能,所以合理地运用CSS动画效果才是最重要的。