html 状态开关按钮,HTML5漂亮的动效开关按钮

CSS

语言：

CSSSCSS

确定

html {

background: #2f2f2f url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/507450/fabric.png");

height: 100%;

text-align: center;

overflow: hidden;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

body {

background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.8));

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

height: 100%;

}

main {

position: relative;

left: 50%;

margin-left: -117px;

text-align: center;

}

.surround {

float: left;

background: #111 -webkit-linear-gradient(#111, #0c0c0c);

background: #111 linear-gradient(#111, #0c0c0c);

border-radius: 8px;

border: 2px solid #090909;

border-top: 2px solid #2b2b2b;

box-shadow: 0 12px 15px;

z-index: 1;

cursor: pointer;

position: relative;

top: 50vh;

width: 108px;

height: 190px;

margin: -95px auto 0;

}

.surround:not(:last-child) {

margin-right: 10px;

}

.surround:before {

border-top: 1px solid rgba(255, 255, 255, 0.12);

margin: 0 7px;

position: absolute;

top: -2px;

content: "";

display: block;

width: 94px;

}

.surround:after {

background: #000;

border-radius: 6px;

border: 1px solid #161616;

border-top: none;

border-bottom: 2px solid #2f2f2f;

box-shadow: inset 0 0 8px #0c0c0c;

height: 172px;

width: 88px;

position: absolute;

top: 8px;

left: 9px;

content: "";

display: block;

z-index: 2;

}

.button {

background: #090302;

border: 1px solid black;

border-bottom: 6px solid black;

border-radius: 3px;

box-shadow: 0 2px 5px rgba(216, 85, 50, 0.1);

overflow: visible;

-webkit-perspective: 500px;

perspective: 500px;

height: 148px;

width: 72px;

position: relative;

top: 20px;

margin: 0 auto;

z-index: 10;

}

.button:before {

border: 1px solid #160804;

border-top: 3px solid #160804;

border-bottom: 2px solid #97361d;

border-radius: 2px;

background: -webkit-linear-gradient(#160804, #561f10 60%, #6c2715);

background: linear-gradient(#160804, #561f10 60%, #6c2715);

-webkit-transform: rotateX(-30deg);

transform: rotateX(-30deg);

-webkit-filter: blur(1px);

filter: blur(1px);

height: 30px;

width: 70px;

position: absolute;

top: -6px;

left: 0px;

content: "";

z-index: 20;

}

.button-face {

-webkit-perspective: 700px;

perspective: 700px;

text-align: center;

padding-top: 53px;

opacity: 0.8;

z-index: 30;

position: absolute;

top: 25px;

left: -7px;

}

.button-face:before {

background: -webkit-linear-gradient(rgba(216, 85, 50, 0.18) 90%, transparent);

background: linear-gradient(rgba(216, 85, 50, 0.18) 90%, transparent);

border-radius: 2px;

height: 165px;

width: 76px;

position: absolute;

left: 23px;

top: -8px;

content: "";

z-index: 1;

}

.button-face .shadow {

background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.8), transparent 85%);

background: linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.8), transparent 85%);

opacity: 0.8;

position: absolute;

top: 14px;

left: 23px;

height: 140px;

width: 80px;

z-index: 100;

}

.surround.on {

background: -webkit-radial-gradient(ellipse 80px 100px, rgba(253, 64, 13, 0.1), #111111);

background: radial-gradient(ellipse 80px 100px, rgba(253, 64, 13, 0.1), #111111);

}

.surround.on .button {

background: -webkit-linear-gradient(#000, #d52f02, rgba(255, 255, 255, 0.2), #3D0E08 4%, #3D0E08 20%, #a22402);

background: linear-gradient(#000, #d52f02, rgba(255, 255, 255, 0.2), #3D0E08 4%, #3D0E08 20%, #a22402);

border-radius: 8px;

border-top: none;

bottom: 5px;

}

.surround.on .button:before {

background: -webkit-radial-gradient(ellipse 40px 18px at center -2px, rgba(253, 64, 13, 0.9), rgba(0, 0, 0, 0.6));

background: radial-gradient(ellipse 40px 18px at center -2px, rgba(253, 64, 13, 0.9), rgba(0, 0, 0, 0.6));

border-radius: 1;

border: 2px solid #611501;

border-top: none;

width: 68px;

left: 0;

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

height: 29px;

top: 118px;

-webkit-filter: blur(2px);

filter: blur(2px);

}

.surround.on .button-face {

background: -webkit-radial-gradient(circle 90px, rgba(250, 212, 53, 0.7) 15%, rgba(253, 104, 64, 0.55), rgba(216, 85, 50, 0.2) 50%, rgba(0, 0, 0, 0.5));

background: radial-gradient(circle 90px, rgba(250, 212, 53, 0.7) 15%, rgba(253, 104, 64, 0.55), rgba(216, 85, 50, 0.2) 50%, rgba(0, 0, 0, 0.5));

border-top: 1px solid rgba(253, 64, 13, 0.4);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

color: transparent;

text-shadow: none;

width: 66px;

height: 138px;

padding: 0;

left: 21px;

top: 24px;

}

.surround.on .button-face:before {

background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4) 40%, rgba(253, 64, 13, 0.5) 75%, rgba(255, 255, 255, 0.3));

background: linear-gradient(rgba(0, 0, 0, 0.4) 40%, rgba(253, 64, 13, 0.5) 75%, rgba(255, 255, 255, 0.3));

border-top: 2px solid rgba(0, 0, 0, 0.7);

border-left: 1px solid rgba(253, 64, 13, 0.2);

border-right: 1px solid rgba(253, 64, 13, 0.2);

top: 0;

left: -2px;

width: 69px;

height: 107px;

border-radius: 0;

-webkit-transform: none;

transform: none;

}

.surround.on .button-face:after {

display: none;

}

.surround.on .shadow {

display: none;

}