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=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) i.........完整代码请登录后点击上方下载按钮下载查看