一、线性渐变
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>
<main>
<div></div>
</main>
</body>
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);
}
}
4520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
