1 body{
  2     /* 渐变三个参数：1.方向 2.起点颜色 3.终点颜色 */
  3     background:-webkit-linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), -webkit-linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
  4         -webkit-linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), -webkit-linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  5     background:linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(315deg, #939 10%, rgba(255,62,18, 0) 80%),
  6         linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(135deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  7 }
  8 .absolute-center, .menu, .menu .btn .fa, .menu .btn-trigger .line{
  9     position:absolute;
 10     top:50%;
 11     left:50%;
 12     /* 指定对象在X、Y轴上的平移 */
 13     -webkit-transform: translateX(-50%) translateY(-50%);
 14             transform: translateX(-50%) translateY(-50%);
 15 }
 16 .menu{
 17     width:5em;
 18     height:5em;
 19 }
 20 .menu .btn{
 21     position: absolute;
 22     top: 0;
 23     left: 0;
 24     width: 100%;
 25     height: 100%;
 26     border-radius: 50%;
 27     background: rgba(255, 255, 255, 0.15);
 28     opacity:0;
 29     cursor:pointer;
 30     -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
 31     transition:opacity 1s, z-index 0.3s, -webkit-transform 1s;
 32     transition:opacity 1s, z-index 0.3s, transform 1s;
 33     transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
 34     -webkit-transform: translateX(0);
 35             transform:translateX(0);    
 36 }
 37 .menu .btn .fa{
 38     font-size:3em;
 39     -webkit-transition: color 0.3s;
 40             transition: color 0.3s;
 41 }
 42 .menu .btn:hover .fa{
 43     color: rgba(255, 255, 255, 0.7);
 44 }
 45 .menu .btn.btn-trigger{
 46     opacity:1;
 47     z-index:100;
 48     cursor: pointer;
 49     -webkit-transition: -webkit-transform 0.3s;
 50             transition:-webkit-transform 0.3s;
 51             transition: transform 0.3s;
 52 }
 53 .menu .btn.btn-trigger:hover{
 54     -webkit-transform: scale(1.2);
 55             transform: scale(1.2);
 56 }
 57 .menu .btn-trigger:hover .line {
 58     background-color: rgba(255, 255, 255, 0.7);
 59 }
 60 .menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {
 61     background-color: rgba(255, 255, 255, 0.7);
 62 }
 63 .menu .btn-trigger .line{
 64     height:6px;
 65     width:60%;
 66     background: #000;
 67       border-radius: 6px;
 68     -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
 69               transition: background-color 0.3s, height 0.3s, top 0.3s;
 70 }
 71 .menu .btn-trigger .line:before, .menu .btn-trigger .line:after {
 72     content: "";
 73     display: block;
 74     position: absolute;
 75     left: 0;
 76     width: 100%;
 77     height: 6px;