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动画效果才是最重要的。