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=Press+Start+2P&display=swap" rel="stylesheet">
  
  
  
<style>
.box{
    position : relative ;
    display : flex ;
    flex-wrap : wrap ;
    perspective : 400px ;
    width : 600px ;
    height :300px ;
}
.box::before{
    content : '' ;
    position : absolute ;
    z-index : -1 ;
    bottom : 20px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 160px ;
    height : 24px ;
    border-radius : 50% ;
    background : radial-gradient( rgba(0,0,0,.4) 10%, rgba(0,0,0,0) 50%) ;
    animation : shadow ease 3s infinite alternate ;
    opacity : .5 ;
}
.area{
    width : calc( 100% / 3 ) ;
    height : calc( 100% / 3 ) ; 
    box-sizing : border-box ;
}
.robot{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    bottom : 0 ;
    margin : auto ;
    width : 240px ;
    height : 80px ;
    animation : float ease 3s infinite alternate ;
}
.front,
.face{
    position : absolute ;
    z-index : 1 ;
    top : 0 ;
    left : 0 ;
    width : 240px ;
    height : 80px ;
    transform-origin : 50% 50% -40px ;
    transition : all ease .2s ;
    transform : rotateX(0) rotateY(0) ;
    perspective : 400px ;
}
.face{
    z-index : 2 ;
    background : #aaa ;
    background-color:hsla(0,4%,45%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(25,10%,31%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(188,8%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(350,2%,45%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,8%,20%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(19,0%,0%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(29,15%,16%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(339,0%,60%,1) 0px, transparent 50%);
}
.face__wrapper{
    position : absolute ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    bottom : 0 ;
    margin : auto ;
    width : 220px ;
    height : 60px ;
    background : #333 ;
    box-shadow : 0 0 8px rgba(0,0,0,.6) inset ;
}
.eye{
    position : absolute ;
    z-index : 1 ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    bottom : 0 ;
    margin : auto ;
    width : 150px ;
    height : 30px ;
    transition : all ease .3s ;
}
.eye::before,
.eye::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    bottom : 0 ;
    margin : auto ;
    width : 30px ;
    height : 30px ;
    border-radius : 20px ;
    background : #ffde55 ;
    box-sizing : border-box ;
    border : solid 1px #a48c00 ;
    box-shadow : 0 0 8px rgba(255,255,0 ,1)  ;
    animation : eye linear 6s infinite ;
    transition : all ease .2s ;
}
.eye::before{
    left : 0 ;
}
.eye::after{
    right : 0 ;
}
.text{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    bottom : 0 ;
    margin : auto ;
    width : 80% ;
    height : 70% ;
    font-size : 24px ;
    font-weight : bold ;
    color : transparent ;
    font-family: 'Press Start 2P', cursive;
    letter-spacing : 3px ;
    transition : all ease-out .2s ;
    
}
.text::before,
.text::after{
    content : '' ;
    position : absolute ;
    width : 0 ;
    height : 2px ;
    background : #ffde55 ;
    transition : all ease-out .2s ;
    box-shadow : 0 0 8px rgba(255,255,0 ,1)  ;
}
.text::before{
    top : 0 ;
    left : 0 ;
}
.text::after{
    bottom : 0 ;
    right : 0 ;
}
@keyframes eye {
    0%  { height : 30px ; }
    10% { height : 30px ; }
    11% { height : 3px ; }
    12% { height : 30px ; }
    60% { height : 30px ; }
    61% { height : 3px ; }
    62% { height : 30px ; }
    63% { height : 30px ; }
    64% { height : 3px ; }
    65% { height : 30px ; }
    100%{ height : 30px ; }
}
.parts_A::before,
.parts_A::after{
    background : #888 ;
    background-color:hsla(0,4%,45%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(25,10%,31%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(188,8%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(350,2%,45%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,8%,20%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(19,0%,0%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(29,15%,16%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(339,0%,60%,1) 0px, transparent 50%);
}
.parts_A::before,
.parts_A::after{
    content : '' ;
    position : absolute ;
    top : 0;
    width : 80px ;
    height : 80px ;
    transition : all ease .2s ;
}
.parts_A::before{
    right : 0 ;
    transform-origin : right center ;
    transform : rotateY(253deg) skewY(0);
}
.parts_A::after{
    left : 0 ;
    transform-origin : left center ;
    transform : rotateY(107deg) skewY(0);
}
.parts_B::before,
.parts_B::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    right : 0 ;
    width : 240px ;
    height : 80px ;
    transition : all ease .2s ;
}
.parts_B::before{
    transform-origin : bottom center ;
    transform : rotatex(96deg) skewX(0deg);
    background-color:hsla(0,4%,45%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(25,10%,31%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(188,8%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(350,2%,45%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,8%,20%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(19,0%,0%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(29,15%,16%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(339,0%,60%,1) 0px, transparent 50%);
}
.parts_B::after{
    transform-origin : top center ;
    transform : rotatex(-96deg) skewX(0deg);
    background-color:hsla(0,4%,45%,1);
    background-image:
    radial-gradient(at 40% 20%, hsla(25,10%,31%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(188,8%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(350,2%,45%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,8%,20%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(19,0%,0%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(29,15%,16%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(339,0%,60%,1) 0px, transparent 50%);
}
.area_1:hover ~ .robot .front,
.area_1:hover ~ .robot .face{
    transform : rotateX(20deg) rotateY(-35deg) ;
}
.area_1:hover ~ .robo.........完整代码请登录后点击上方下载按钮下载查看