css实现三维立体菜单图标悬浮动画效果代码-html代码-BFW代码库

css实现三维立体菜单图标悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现三维立体菜单图标悬浮动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  
  
  
<style>
*{
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        body{
            background: rgba(128, 0, 128, 0.38);
            height: 100vh;
        }
        #menu{
            width: 150px;
            height: 500px;
/*            border: 1px solid red;*/
            margin: 100px auto;
            transform:skew(35deg, -16deg)
        }
        #menu>li{
            list-style-type: none;
            background: white;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            position: relative;
            transition: 1s;
        }
        #menu>li:hover{
            background: orange;
            color: white;
            transform: translate(20px, -20px);
            box-shadow: -50px 50px 10px rgba(0, 0, 0, 0.63)
        }
        #menu>li:hover::before{
            background: #ebb551
        }
        #menu>li:hover::after{
            background: #.........完整代码请登录后点击上方下载按钮下载查看