css3动画特效例子

CSS3动画效果为网站带来更多的生动感，为网站用户提供了更好的用户体验。下文将通过一些例子来介绍常见的CSS3动画特效。

/* 例一：背景颜色渐变 */div {
    background: linear-gradient(to right, #000, #fff);
    transition: background 0.5s ease-out;
}
div:hover {
    background: linear-gradient(to right, #fff, #000);
}
/* 例二：鼠标移入按钮缩放 */button {
    transition: transform .5s ease-in-out;
}
button:hover {
    transform: scale(1.2);
}
/* 例三：图片高斯模糊效果 */img {
    transition: all .2s ease-out;
    filter: blur(0);
}
img:hover {
    filter: blur(4px);
}
/* 例四：旋转动画 */@keyframes spin {
0% {
     transform: rotate(0deg);
 }
100% {
     transform: rotate(360deg);
 }
}
div {
    animation: spin 2s linear infinite;
}
    

除了以上几个例子外，CSS3动画效果还有很多种，例如悬停动画、弹跳效果等等。如果您是网站设计爱好者或者网页制作人员，欢迎尝试并掌握更多的CSS3动画特效，为您的网站增添更多的艺术感和生动感。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！