利用background-positon,background-image ,实现背景渐变

.wrap{
height: 100%;
background-color: #9933ff;
background-image: linear-gradient(135deg, #bb33ff 30%,#9933ff 50%);
background-position: 0 -100vh;
transition: 1s;
background-repeat: no-repeat;
}
 
.wrap:hover{
background-position: 0 0;
}
原文地址:https://www.cnblogs.com/caolidan/p/11242598.html