css背景渐变和动画

一、线性渐变

background: linear-gradient(to right, green, yellow, red, blue);

二、径向渐变

1. 圆形

background: radial-gradient(circle at center, #fff, #000);

2. 椭圆形

background: radial-gradient(ellipse at left top, #fff, #000);

三、动画

1. 背景渐变

background-image: linear-gradient(0deg, yellow 0%, pink 100%);

background-size: 400% 400%;

animation: ljj 10s ease infinite;

@keyframes ljj {

0% {background-position: 0% 0%;}

50% {background-position: 100% 100%;}

100% {background-position: 0% 0%;}

}

2. 动画

        


                


        



body {

    margin: 0;

    padding: 0;

    width: 100vw;

    height: 100vh;

    background-color: #2E3E54;

    display: grid;

}



main {

    width: 400px;

    height: 400px;

    background-color: rgb(51, 139, 109);

    padding: 20px;

    justify-self: center;

    align-self: center;

}



div {

    width: 50px;

    height: 50px;

    background-color: coral;

    border-radius: 50%;

    animation: move 5s infinite;

}

/* move为动画名 自定义 */

@keyframes move {

    0% {

        transform: translate(0, 0);

    }

    25% {

        transform: translate(350px, 0);

    }

    50% {

        transform: translate(350px, 350px);

    }

    75% {

        transform: translate(0, 350px);

    }

    100% {

        transform: translate(0, 0);

    }

}