本实例实现流动色彩效果，用到conic-gradient圆锥渐变，filter、animation动画
html页面：
<body>
<div class="card">
<h2>
React JS
<span>Fundamental</span>
</h2>
<div class="more">Learn More</div>
</div>
</body>
</html>css样式部分：
body{
margin: 0;
background-color: #1e293b;
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
min-height: 100vh;
}
h2,p{
margin: 0;
}
h2{
padding: 0;
font-size: 60px;
letter-spacing: -1px;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
h2 span{
font-weight: normal;
font-size: 50px;
display: block;
}
.card{
width: 400px;
height: 400px;
position: relative;
border-radius: 40px;
padding: 40px;
box-sizing: border-box;
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7) ,0 8px 20px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.card .more{
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 32px;
padding: 20px 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.card::after{
content: "";
position: absolute;
top: -300px;
right: -300px;
bottom: -300px;
left: -300px;
background: conic-gradient(from 180deg at 50% 50%,#12001B -97.5deg,
#000000 14.05deg,#040EFF 54.01deg,
#8000FF 113.42deg,#00B6B6 185.62deg,
#12001B 262.5deg,#000000 374.05deg);
z-index: -1;
filter: blur(60px) brightness(1.5);
animation: 30s move linear infinite;
}
@keyframes move{
from{
transform: rotate(180deg);
}
to{
transform: rotate(540deg);
}
}演示链接：https://www.shangjidong.com/demos/conic-gradient.html
演示效果如下图：
