html+css实现漂亮的登录页面

效果展示

代码展示

    
    
    
    
    



    

        

            
Preencha seus dados para fazer login
            
            
            login
        
    

 关键性代码说明

//设置渐变色背景
background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%);

//设置动画
animation: pulse 1.5s infinite;

@keyframes pulse {
            0% {
                box-shadow: 0 0 0 50px rgba(255, 255, 255, .2);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
}

//注意与 filter 区别
backdrop-filter: blur(20px);

// filter:模糊所有，包括内容
// backdrop-filter:只模糊背景，不包括内容

//设置过度
transition: all ease .4s;