流体渐变效果的实现
动态流体渐变效果
demo如下:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试title>
head>
<body>
<style>
* {
margin: 0px;
padding: 0px
}
.box {
height: 900px;
background: #0299d8;
background: linear-gradient(45deg, #f5576c 0%, #304ffd 33%, #7b8df3 66%, #f093fb 100%);
background-size: 400%;
background-position: 0% 100%;
animation: gradient 2s ease-in-out infinite;
}
@keyframes gradient {
50% {
background-position: 100% 0
}
}
style>
<div class="box">div>
body>
html>