[分享]css两个动画效果图

CSS动画是网页设计中必不可少的元素，能让网页更加生动、吸引人。在这篇文章中我们将学习两个非常常用的CSS动画效果图。1. 旋转动画效果 .rotate { width: 100px; height:...

CSS动画是网页设计中必不可少的元素，能让网页更加生动、吸引人。在这篇文章中我们将学习两个非常常用的CSS动画效果图。

1. 旋转动画效果

 .rotate {
        width: 100px;
        height: 100px;
        background: #f00;
        animation: rotate 2s infinite linear;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    } 

这段代码会让一个红色的div通过transform属性旋转起来，转动的周期为2秒，无限循环。同时，通过@keyframes规则制定了旋转的动画效果，以100%为结束帧时，将旋转360度。

2. 渐变背景动画效果

 .gradient-bg {
        width: 100%;
        height: 100vh;
        background: linear-gradient(90deg, #f00, #0f0, #00f);
        background-size: 600% 600%;
        animation: gradient 10s ease infinite;
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    } 

这段代码定义了一个渐变背景动画，通过background属性设置三个颜色，background-size属性则指定渐变背景的大小，animation属性定义动画效果。在@keyframes规则中，我们制定了从0%到50%的动画效果，接着又从50%到100%，最后再从100%到0%。

以上便是两个常用的CSS动画效果图的代码，你可以根据自己的需求，应用于不同的网站设计中。祝你设计愉快！