h5可拖动悬浮按钮_一款HTML5带材料化加号悬浮动作按钮的单页模板

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

body,

html {

font-family: 'Raleway', sans-serif;

}

li {

font-size: 0.6em;

font-weight: 500;

list-style-type: none;

}

section h1 {

font-size: 2em;

text-align: center;

font-weight: 900;

color: white;

padding-top: 45vh;

}

#title {

text-align: center;

width: 100%;

top: 40%;

color: white;

font-size: 3em;

position: fixed;

z-index: 10;

font-weight: 900;

text-transform: uppercase;

}

#triangle-up {

width: 0;

height: 0;

border-left: 100vw solid transparent;

border-right: 0 solid transparent;

border-bottom: 100vh solid #16a085;

transition: 2s ease-in-out;

position: fixed;

z-index: 1;

top: 0;

right: 0;

}

#triangle-down {

width: 0;

height: 0;

border-left: 0 solid transparent;

border-right: 100vw solid transparent;

border-top: 100vh solid #16a085;

transition: 2s ease-in-out;

float: left;

position: fixed;

z-index: 1;

left: 0;

top: 0;

}

#button,

#menu {

position: fixed;

z-index: 2;

opacity: 1;

width: 11vh;

height: 11vh;

bottom: 100px;

left: calc(50% - 5.5vh);

background-color: #16a085;

border: none;

border-radius: 50%;

font-family: 'Raleway', sans-serif;

color: white;

font-size: 2em;

transition: .5s ease-in-out;

cursor: pointer;

-webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);

box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);

}

#button:focus,

#menu:focus {

outline: 0;

}

#button:hover {

transform: scale(1.2);

}

#button:active {

transform: scale(1.1);

}

#menuContent {

position: fixed;

width: 100%;

height: 100%;

display: none;

text-align: center;

z-index: 3;

opacity: 0.95;

}

#menuContent ul,

#menuContent a {

font-size: 2em;

font-weight: 900;

height: 100%;

color: white;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-justify-content: center;

justify-content: center;

text-decoration: none;

transition: .2s ease-in-out;

}

#menuContent a:hover {

opacity: 0.8;

transition: .2s ease-in-out;

}

#menuContent li {

margin-bottom: 20px;

animation: itemsInefade 2s forwards;

opacity: 0;

}

@keyframes itemsInefade {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

#menuContent li:nth-child(2) {

animation-delay: .2s

}

#menuContent li:nth-child(3) {

animation-delay: .4s

}

#menuContent li:nth-child(4) {

animation-delay: .6s

}

#menuContent #menuClose {

position: absolute;

top: 20px;

right: 70px;

color: white;

font-size: 2em;

transition: .2s ease-in-out;

cursor: pointer;

}

#menuContent #menuClose:hover {

opacity: 0.8;

transition: .2s ease-in-out;

}

.krassInefade {

transform: perspective(900px) translateZ(0px);

opacity: 1;

transition: 2s ease-out;

}

#triangle-down.usenand {

border-left: 0 solid transparent;

border-right: 0 solid transparent;

border-top: 100vh solid #1abc9c;

transition: 2s ease-in-out;

}

#triangle-up.usenand {

border-left: 0 solid transparent;

border-right: 0 solid transparent;

border-bottom: 100vh solid #16a085;

transition: 2s ease-in-out;

}

#menu.toMenu {

left: 80px;

bottom: 80px;

background-color: #16a085;

opacity: 1;

width: 11vh;

height: 11vh;

transition: 2s ease-in-out;

border: 0 solid white;

border-radius: 50%;

}

#menu.menuTransition {

width: 100%;

height: 100%;

opacity: 0.95;

border-radius: 0;

bottom: 0;

left: 0;

transition: .5s ease-in-out;

}

section {

height: 100vh;

}

.section1 {

background-color: #4ab29e;

}

.section2 {

background-color: #71bcae;

}

.section3 {

background-color: #8fc4ba;

}