加号按钮 html,加号按钮变弹出式窗口

CSS

语言：

CSSSCSS

确定

body {

font-family: "Roboto", sans-serif;

width: 100%;

height: 100%;

margin: 0;

padding: 0;

color: #fff;

background: #fafafa;

}

h1 {

font-weight: 700;

font-size: 64px;

margin: 20px 0 0 0;

padding: 0 20px;

}

p {

font-size: 16px;

padding: 0 20px;

}

em {

font-style: normal;

color: #ffc400;

}

a {

font-style: normal;

color: #ffd740;

text-decoration: none;

padding-right: 10px;

cursor: pointer;

}

.sub {

margin: 0;

}

.button {

cursor: pointer;

width: 60px;

height: 60px;

display: inline-block;

font-size: 30px;

line-height: 60px;

-webkit-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);

transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);

}

.button.expand {

-webkit-transform: rotate(585deg);

-ms-transform: rotate(585deg);

transform: rotate(585deg);

-webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}

.container {

position: absolute;

margin: auto;

left: 0;

right: 0;

top: 5vh;

background-color: #03a9f4;

border-radius: 50%;

width: 60px;

max-width: 60px;

height: 60px;

text-align: center;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

overflow: hidden;

-webkit-transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;

transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;

}

.container.expand {

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);

border-radius: 0;

width: 80%;

height: 500px;

max-width: 700px;

padding: 0;

-webkit-transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;

transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;

}

.content {

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

width: 100%;

height: 100%;

opacity: 0;

text-align: left;

-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;

transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;

}

.content.expand {

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

opacity: 1;

-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s;

transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s;

}

.content .head {

padding: 0 0 20px 0;

}

.content .body {

color: #000;

color: rgba(0, 0, 0, 0.87);

background-color: #fff;

width: 100%;

height: 100%;

padding: 10px 0;

box-sizing: border-box;

}

.action-bar {

padding-left: 15px;

border-top: 1px solid #e0e0e0;

width: 100%;

}

.action-bar a {

text-transform: uppercase;

line-height: 52px;

color: #ffc400;

}