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

代码语言：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( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ;
}
.button__wrapper{
    position : relative ;
    z-index : 2 ;
    width : 100% ;
    height : 100% ;
    background : linear-gradient( rgba(255,255,255,.4) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ;
    transform : translate3d( 0 , 27px , 74px) ;
    perspective : 600px ;
}
.button__text{
    position : relative ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
    font-family: 'Alfa Slab One', cursive;
    font-size : 32px ;
    letter-spacing : 4px ;
    color : rgba(255,255,255,.2) ;
    transition : all ease-in-out 1s ;
}
.button__text::before{
    content : '' ;
    position : absolute ;
    z-index : 1 ;
    top : 0 ;
    left : 0 ;
    width : 230px ;
    height : 80px ;
    background : linear-gradient(25deg , rgba(255,255,255,.1) , rgba(255,255,255,0)) ;
    clip-path : path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z') ;
}
.button__text::after{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : 4px ;
    left : 4px ;
    width : 272px ;
    height : 40px ;
    background : linear-gradient(25deg , rgba(255,255,255,.3) , rgba(255,255,255,0)) ;
    clip-path : path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z') ;
}
.button__wrapper::before,
.button__wrapper::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    width : 84px ;
    height : 100% ;
    background : linear-gradient(90deg , rgba(255,255,255,.2) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ;
    background : radial-gradient( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ;
}
.button__wrapper::before{
    left : 0 ;
    transform-origin : left center ;
    transform : rotateY(90deg) skewY(-20deg);
}
.button__wrapper::after{
    right : 0 ;
    transform-origin : right center ;
    transform : rotateY(-90deg) skewY(20deg);
}

.button__box{
    position : absolute ;
    top : 0 ;
    left : 8px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 264px ;
    height : 70px ;
    transform : translate3d(0, 4px, 10px) ;
    perspective : 600px ;
}
.inner{
    transition : all ease-in-out 1s ;
}
.inner__back{
    position : absolute ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    background : var(--bottom);
    perspective : 600px ;
}
.inner__top{
    position : absolute ;
    z-index : 3 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : top left ; 
    transform : rotateX(70deg) ;
    background : var(--top);
}
.inner__front{
    position : absolute ;
    z-index : 3 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : top left ; 
    transform : translate3d(0, 24px, 68px ) ;
    background : var(--top);
}
.inner__bottom{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : bottom left ; 
    transform : rotateX(-110deg) ;
    background : var(--bottom);
}
.inner__left{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 68px ;
    height : 100% ;
    transform-origin : center left ; 
    transform : rotateY(-90deg) skewY(20deg) ;
    background : rgba(255,0,0,0) ;
    transition : all linear .01s ;
}
.inner__right{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 68px ;
    height : 100% ;
    transform-origin : center left ; 
    transform.........完整代码请登录后点击上方下载按钮下载查看