html5 窗口 最小化,HTML5 窗口最小化动画（先压扁后变窄）

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

padding: 0;

margin: 0;

font-family: sans-serif;

font-weight: 300;

}

.bg {

background: -webkit-linear-gradient(bottom left, #060628, #1f245a, #682359);

background: linear-gradient(to top right, #060628, #1f245a, #682359);

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

}

.window {

position: fixed;

top: 50%;

left: 50%;

width: 700px;

height: 400px;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background-color: white;

border-radius: 4px;

z-index: 5;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

overflow: hidden;

-webkit-transition: top 0.5s 0s cubic-bezier(0.1, 1.2, 0.3, 1), -webkit-transform 0.5s 0s cubic-bezier(0.1, 1.2, 0.3, 1), width 0.5s 0.5s cubic-bezier(0.1, 1.2, 0.3, 1), opacity 0.3s;

transition: top 0.5s 0s cubic-bezier(0.1, 1.2, 0.3, 1), transform 0.5s 0s cubic-bezier(0.1, 1.2, 0.3, 1), width 0.5s 0.5s cubic-bezier(0.1, 1.2, 0.3, 1), opacity 0.3s;

}

.window .window-controls {

position: absolute;

top: 0;

left: 0;

z-index: 9;

height: 30px;

width: 60px;

}

.window .window-controls .maximize {

background-color: #e8eaec;

position: absolute;

top: -30px;

opacity: 0;

left: 0;

z-index: 9;

width: 200px;

height: 30px;

text-align: center;

line-height: 30px;

color: #b4b9be;

cursor: pointer;

-webkit-transition: opacity 0.3s 0.5s, top 0s 0.8s;

transition: opacity 0.3s 0.5s, top 0s 0.8s;

}

.window .window-controls .close,

.window .window-controls .minimize {

opacity: 0.5;

cursor: pointer;

}

.window .window-controls .close:hover,

.window .window-controls .minimize:hover {

opacity: 0.7;

}

.window .window-controls .close:active,

.window .window-controls .minimize:active {

opacity: 1;

}

.window .window-controls .close {

width: 30px;

height: 30px;

float: left;

}

.window .window-controls .close:before,

.window .window-controls .close:after {

position: absolute;

content: "";

width: 12px;

height: 2px;

background-color: black;

position: absolute;

border-radius: 2px;

top: 14px;

left: 9px;

}

.window .window-controls .close:before {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.window .window-controls .close:after {

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.window .window-controls .minimize {

width: 30px;

height: 30px;

float: left;

position: relative;

}

.window .window-controls .minimize:before,

.window .window-controls .minimize:after {

position: absolute;

content: "";

width: 10px;

height: 2px;

background-color: black;

position: absolute;

border-radius: 2px;

top: 14px;

left: 10px;

}

.window .window-controls .minimize:before {

-webkit-transform: translateX(-3px) rotate(45deg);

-ms-transform: translateX(-3px) rotate(45deg);

transform: translateX(-3px) rotate(45deg);

}

.window .window-controls .minimize:after {

-webkit-transform: translateX(3px) rotate(-45deg);

-ms-transform: translateX(3px) rotate(-45deg);

transform: translateX(3px) rotate(-45deg);

}

.window .window-sidebar {

width: 200px;

height: 400px;

background-color: #e8eaec;

position: absolute;

top: 0;

left: 0;

padding-top: 30px;

z-index: 4;

}

.window .window-sidebar .content-block {

height: 60px;

width: 100%;

position: relative;

border-top: 1px solid rgba(0, 0, 0, 0.05);

}

.window .window-sidebar .content-block:before {

position: absolute;

content: "";

width: 40px;

height: 40px;

border-radius: 50%;

background-color: black;

top: 10px;

left: 10px;

opacity: 0.05;

}

.window .window-sidebar .content-block:after {

position: absolute;

content: "";

width: 120px;

height: 10px;

background-color: black;

top: 25px;

left: 60px;

opacity: 0.05;

border-radius: 5px;

}

.window .window-content {

position: absolute;

top: 0;

right: 0;

width: 500px;

height: 400px;

}

.window .window-content:before {

position: absolute;

content: "";

width: 460px;

height: 200px;

background-color: black;

top: 20px;

left: 20px;

opacity: 0.05;

border-radius: 5px;

}

.window .window-content:after {

position: absolute;

content: "";

width: 380px;

height: 10px;

background-color: black;

top: 240px;

left: 60px;

opacity: 0.05;

border-radius: 5px;

}

.minimized .window {

top: 95%;

-webkit-transform: translate(-50%, -30px);

-ms-transform: translate(-50%, -30px);

transform: translate(-50%, -30px);

width: 200px;

opacity: 0.5;

}

.minimized .window:hover {

opacity: 0.75;

}

.minimized .window .maximize {

top: 0;

opacity: 1;

-webkit-transition: opacity 0.3s 0.5s, top 0s 0.5s;

transition: opacity 0.3s 0.5s, top 0s 0.5s;

}

.text {

position: fixed;

top: 50%;

left: 50%;

color: white;

-webkit-transform: translate(350px, -200px);

-ms-transform: translate(350px, -200px);

transform: translate(350px, -200px);

z-index: 10;

padding-left: 20px;

}

.text .title {

font-size: 20px;

line-height: 20px;

display: block;

margin-bottom: 5px;

}

.text .name {

display: block;

opacity: 0.5;

}