背景色渐变+动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通过 background-size 模拟渐变动画 */
div {
position: relative;
width: 300px;
height: 100px;
margin: 20px auto;
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
background-position: 100% 0;
animation: bgSize 5s infinite ease-in-out alternate;
}
@keyframes bgSize {
0% {
background-size: 300% 100%;
}
100% {
background-size: 100% 100%;
}
}
/* 通过 background-position 模拟渐变动画 */
p {
position: relative;
width: 300px;
height: 100px;
margin: 20px auto;
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
background-size: 200% 100%;
background-position: 0 0;
animation: bgposition 2s infinite linear alternate;
}
@keyframes bgposition {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
/* 通过 transform 模拟渐变动画 */
ul {
position: relative;
overflow: hidden;
width: 180px;
height: 180px;
margin: 40px auto;
}
ul::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
bottom: -100%;
right: -100%;
background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
background-size: 100% 100%;
animation: position 8s infinite linear alternate;
z-index: -1;
}
@keyframes position {
0% {
transform: translate(30%, 30%);
}
25% {
transform: translate(30%, -30%);
}
50% {
transform: translate(-30%, -30%);
}
75% {
transform: translate(-30%, 30%);
}
100% {
transform: translate(30%, 30%);
}
}
</style>
</head>
<body>
<div></div>
<p></p>
<ul></ul>
</body>
</html>
