div+css实现玻璃立方体按钮悬浮填充动画效果代码-html代码-BFW代码库

div+css实现玻璃立方体按钮悬浮填充动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现玻璃立方体按钮悬浮填充动画效果代码，

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
  
  
  
<style>
.button{
    --top : rgba(100,100,100,.8) ;
    --bottom : rgba(100,100,100,.2) ;
    --side : rgba(100,100,100,.5) ;

    --1_top : rgba(216,0,60,.8) ;
    --1_bottom : rgba(216,0,60,.2) ;
    --1_side : rgba(216,0,60,.5) ;

    --2_top : rgba(0,100,190,.8) ;
    --2_bottom : rgba(0,100,190,.2) ;
    --2_side : rgba(0,100,190,.5) ;

    --3_top : rgba(0,170,100,.8) ;
    --3_bottom : rgba(0,170,100,.2) ;
    --3_side : rgba(0,170,100,.5) ;

    --4_top : rgba(255,230,20,.8) ;
    --4_bottom : rgba(255,230,20,.2) ;
    --4_side : rgba(255,230,20,.5) ;

    --5_top : rgba(155,50,255,.8) ;
    --5_bottom : rgba(155,50,255,.2) ;
    --5_side : rgba(155,50,255,.5) ;
}

.button{
    display : flex ;
    position : relative ;
    width : 280px ;
    height : 80px ;
    text-decoration : none ;
    perspective : 600px ;
    background : linear-gradient( rgba(255,255,255,.1) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.1)) ;
    box-shadow : 0 0 32px rgba(0,0,0,1) ;
}
.button::before,
.button::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 100% ;
    height : 100% ;    
}
.button::before{
    top : 0 ;
    transform-origin : top center ;
    transform : rotateX(70deg) ;
    background : linear-gradient(135deg , rgba(255,255,255,.3) 10%, rgba(255,255,255,0) 60%);
}
.button::after{
    bottom : 0 ;
    transform-origin : bottom center ;
    transform : rotateX(-110deg) ;
    background : radial-gradient.........完整代码请登录后点击上方下载按钮下载查看