CSS

语言：

CSSSCSS

确定

body {

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

background-color: #222;

font-family: "proxima-nova-soft";

font-size: 0;

color: #424950;

-webkit-user-select: none;

cursor: default;

}

.key {

position: absolute;

left: 50%;

top: 50%;

margin-left: -90px;

margin-top: -95px;

cursor: pointer;

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes float{ 0% { -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,8px,0); }}

@-moz-keyframes float{ 0% { -moz-transform: translate3d(0,0,0); } 50% { -moz-transform: translate3d(0,8px,0); }}

@-o-keyframes float{ 0% { -o-transform: translate3d(0,0,0); } 50% { -o-transform: translate3d(0,8px,0); }}

@keyframes float{ 0% {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 50% {-webkit-transform: translate3d(0,8px,0);-moz-transform: translate3d(0,8px,0);-ms-transform: translate3d(0,8px,0);transform: translate3d(0,8px,0); };

}

.click-me {

width: 76px;

height: 26px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -38px;

margin-top: 55px;

line-height: 26px;

color: #fff;

font-size: 10px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

text-align: center;

background-color: #424950;

border-radius: 3px;

-webkit-animation: float 1s infinite;

-moz-animation: float 1s infinite;

-o-animation: float 1s infinite;

animation: float 1s infinite;

cursor: pointer;

-webkit-transition: 300ms ease;

-moz-transition: 300ms ease;

-o-transition: 300ms ease;

transition: 300ms ease;

}

.click-me:after {

width: 20px;

height: 20px;

content: " ";

position: absolute;

top: 50%;

left: 50%;

margin-left: -10px;

margin-top: -15px;

border-radius: 2px;

z-index: -1;

background-color: #424950;

-webkit-transform: rotateZ(45deg);

-moz-transform: rotateZ(45deg);

-o-transform: rotateZ(45deg);

-ms-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.click-me.hide {

opacity: 0;

}

/* End: CSS for CodePen layout only */

/* Start: Key */

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -webkit-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -webkit-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@-moz-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -moz-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -moz-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -moz-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -moz-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@-o-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -o-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -o-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -o-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -o-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform: translate3d(0,-16px,0) rotateZ(8deg);-moz-transform: translate3d(0,-16px,0) rotateZ(8deg);-ms-transform: translate3d(0,-16px,0) rotateZ(8deg);transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform: translate3d(0,-6px,0) rotateZ(-2deg);-moz-transform: translate3d(0,-6px,0) rotateZ(-2deg);-ms-transform: translate3d(0,-6px,0) rotateZ(-2deg);transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% {-webkit-transform: translate3d(0,-3px,0) rotateZ(2deg);-moz-transform: translate3d(0,-3px,0) rotateZ(2deg);-ms-transform: translate3d(0,-3px,0) rotateZ(2deg);transform: translate3d(0,-3px,0) rotateZ(2deg); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes reset{ 0% { -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,8px,0); }}

@-moz-keyframes reset{ 0% { -moz-transform: translate3d(0,0,0); } 50% { -moz-transform: translate3d(0,8px,0); }}

@-o-keyframes reset{ 0% { -o-transform: translate3d(0,0,0); } 50% { -o-transform: translate3d(0,8px,0); }}

@keyframes reset{ 0% {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 50% {-webkit-transform: translate3d(0,8px,0);-moz-transform: translate3d(0,8px,0);-ms-transform: translate3d(0,8px,0);transform: translate3d(0,8px,0); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes clockRotate{ 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); }}

@-moz-keyframes clockRotate{ 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(360deg); }}

@-o-keyframes clockRotate{ 0% { -o-transform: rotateZ(0deg); } 100% { -o-transform: rotateZ(360deg); }}

@keyframes clockRotate{ 0% {-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);transform: rotateZ(0deg); } 100% {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD0{ 0% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD0{ 0% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD0{ 0% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD0{ 0% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD1{ 0%,15% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD1{ 0%,15% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD1{ 0%,15% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD1{ 0%,15% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD2{ 0%,30% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD2{ 0%,30% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD2{ 0%,30% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD2{ 0%,30% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@-moz-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@-o-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; };

}

.key {

width: 180px;

height: 150px;

}

.key svg {

width: 180px;

height: 150px;

stroke-linecap: round;

stroke-linejoin: round;

}

.key svg .key-body {

-webkit-transform-origin: 80px 78px;

-moz-transform-origin: 80px 78px;

-o-transform-origin: 80px 78px;

-ms-transform-origin: 80px 78px;

transform-origin: 80px 78px;

}

.key svg .key-body .key-border {

fill: #fff;

stroke: #9aa8b1;

stroke-width: 2;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .key-body .key-highlight {

fill: #e8ebed;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .key-body .key-darkness {

fill: #e8ebed;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .data-circle {

opacity: .3;

-webkit-transform-origin: 89.5px 76px;

-moz-transform-origin: 89.5px 76px;

-o-transform-origin: 89.5px 76px;

-ms-transform-origin: 89.5px 76px;

transform-origin: 89.5px 76px;

-webkit-transition: all 800ms;

-moz-transition: all 800ms;

-o-transition: all 800ms;

transition: all 800ms;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

-webkit-animation: clockRotate 18s linear 0 infinite reverse;

-moz-animation: clockRotate 18s linear 0 infinite reverse;

-o-animation: clockRotate 18s linear 0 infinite reverse;

animation: clockRotate 18s linear 0 infinite reverse;

}

.key svg .data-circle path {

fill: none;

}

.key svg .data-circle text {

font-size: 9px;

font-weight: 700;

fill: #89949b;

letter-spacing: 1px;

}

.key svg .data-circle.inner {

-webkit-animation-direction: normal;

-moz-animation-direction: normal;

-o-animation-direction: normal;

animation-direction: normal;

-webkit-animation-duration: 20s;

-moz-animation-duration: 20s;

-o-animation-duration: 20s;

animation-duration: 20s;

}

.key svg .data-circle.inner text {

font-size: 8.1px;

}

.key svg .glow-circle {

opacity: 0;

fill: none;

stroke: #CB9916;

stroke-width: 3;

stroke-dasharray: 30,14,0.1,14;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

-webkit-animation: glowCircle 3s ease-in-out 0 infinite alternate;

-moz-animation: glowCircle 3s ease-in-out 0 infinite alternate;

-o-animation: glowCircle 3s ease-in-out 0 infinite alternate;

animation: glowCircle 3s ease-in-out 0 infinite alternate;

}

.key svg .glow-lines {

opacity: 0;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .glow-lines line {

stroke: #CB9916;

stroke-width: 3;

stroke-dasharray: 40 100;

stroke-dashoffset: 40;

-webkit-animation: glowLineD0 2s linear 0 infinite;

-moz-animation: glowLineD0 2s linear 0 infinite;

-o-animation: glowLineD0 2s linear 0 infinite;

animation: glowLineD0 2s linear 0 infinite;

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

animation-play-state: paused;

}

.key svg .glow-lines line:nth-child(1) {

-webkit-animation-name: glowLineD0;

-moz-animation-name: glowLineD0;

-o-animation-name: glowLineD0;

animation-name: glowLineD0;

}

.key svg .glow-lines line:nth-child(2) {

-webkit-animation-name: glowLineD3;

-moz-animation-name: glowLineD3;

-o-animation-name: glowLineD3;

animation-name: glowLineD3;

}

.key svg .glow-lines line:nth-child(3) {

-webkit-animation-name: glowLineD1;

-moz-animation-name: glowLineD1;

-o-animation-name: glowLineD1;

animation-name: glowLineD1;

}

.key svg .glow-lines line:nth-child(4) {

-webkit-animation-name: glowLineD4;

-moz-animation-name: glowLineD4;

-o-animation-name: glowLineD4;

animation-name: glowLineD4;

}

.key svg .glow-lines line:nth-child(5) {

-webkit-animation-name: glowLineD2;

-moz-animation-name: glowLineD2;

-o-animation-name: glowLineD2;

animation-name: glowLineD2;

}

.key svg .glow-lines line:nth-child(6) {

-webkit-animation-name: glowLineD5;

-moz-animation-name: glowLineD5;

-o-animation-name: glowLineD5;

animation-name: glowLineD5;

}

.key svg .stars {

opacity: 0;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .stars path {

fill: #fff;

stroke: #CB9916;

stroke-width: 2;

-webkit-animation: glowStarD0 2s linear 0.9s infinite;

-moz-animation: glowStarD0 2s linear 0.9s infinite;

-o-animation: glowStarD0 2s linear 0.9s infinite;

animation: glowStarD0 2s linear 0.9s infinite;

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

animation-play-state: paused;

-webkit-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-moz-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-o-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-ms-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

opacity: 0;

}

.key svg .stars path:nth-child(1) {

-webkit-animation-name: glowStarD0;

-moz-animation-name: glowStarD0;

-o-animation-name: glowStarD0;

animation-name: glowStarD0;

}

.key svg .stars path:nth-child(2) {

-webkit-animation-name: glowStarD1;

-moz-animation-name: glowStarD1;

-o-animation-name: glowStarD1;

animation-name: glowStarD1;

}

.key svg .stars path:nth-child(3) {

-webkit-animation-name: glowStarD2;

-moz-animation-name: glowStarD2;

-o-animation-name: glowStarD2;

animation-name: glowStarD2;

}

.key.on svg .key-body {

-webkit-animation: jump 0.7s;

-moz-animation: jump 0.7s;

-o-animation: jump 0.7s;

animation: jump 0.7s;

}

.key.on svg .key-body .key-border {

fill: #FFD055;

stroke: #CB9916;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .key-body .key-highlight {

fill: #FFE155;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .key-body .key-darkness {

fill: #F1BF3C;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .data-circle {

opacity: 0;

-webkit-transition-duration: 400ms;

-moz-transition-duration: 400ms;

-o-transition-duration: 400ms;

transition-duration: 400ms;

-webkit-transition-delay: 0;

-moz-transition-delay: 0;

-o-transition-delay: 0;

transition-delay: 0;

}

.key.on svg .glow-circle {

opacity: .15;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .glow-lines {

opacity: .15;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .glow-lines line {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

}

.key.on svg .stars {

opacity: 1;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .stars path {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

}

.key.off svg .key-body {

-webkit-animation: reset 0.4s;

-moz-animation: reset 0.4s;

-o-animation: reset 0.4s;

animation: reset 0.4s;

}

/* End: Key */

css3满天金光飞舞效果,CSS3金光四射的钥匙相关推荐

  1. css3 线条出现动画效果,CSS3实现的线条波浪动画效果

    HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...

  2. html switch开关实现隐藏,css3实现switch开关效果

    之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...

  3. 纯CSS3制作的圆角效果按钮菜单

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  4. css3 各种纸张贴纸效果

    请使用支持CSS3的浏览器查看效果: Box1 Box2 Box3 Box4 Box5 Box6 Box7 Box8 Box9 Box10 Box11 Box12 Box13 Box14 Box15 ...

  5. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...

  6. 前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...

    首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

  7. html广告条效果,css3炫酷网站banner广告动画特效

    这是一款可以用来遮罩网站banner或广告的动画特效插件.该特效使用的是 CSS3 animations.注意不是所有的浏览器都支持 CSS3 animations.如果你对 CSS3 animati ...

  8. html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js

    jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...

  9. 25个CSS3 渐变和动画效果教程

    2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...

最新文章

  1. Windows和Linux下通用的线程接口
  2. NAR：测序数据鉴别和去除rRNA序列利器RiboDetector
  3. 多线程编程3 - NSOperationQueue
  4. javaparser_JavaParser入门：以编程方式分析Java代码
  5. 一个 bug ，罚款 200，我真待过这样的公司
  6. c语言传入的指针无返回值,c语言 关于指针注意事项
  7. xterm远程连服务器连不上_VS Code Remote 发布！开启远程开发新时代
  8. shell制表与脚本运行进度条写法
  9. php 框架_八大PHP开源框架（PHP开发必藏哟）
  10. 前端项目——当当图书网（javaScript）
  11. 慧荣SM2258XT+B17颗粒，固态硬盘无法格式化已开卡成功，经验分享+量产工具，SM2259XT2类似
  12. express 内存溢出问题分析定位
  13. mysql 联合主键的作用
  14. matplotlib如何绘制圆
  15. Mysql 中的事物
  16. echarts学习笔记1
  17. Python成品：运用turtle模块绘画
  18. 设计模式学习之假如你是一个建造者(建造者模式)
  19. 移动端css动态字体大小fontSize rem
  20. 成熟男人与未成熟男人

热门文章

  1. U8打印到PDF报错解决方法
  2. java 手机号运营商号段正则匹配（长期更新）
  3. C# 链接Kep进行读取数据
  4. Java 用JainSip实现服务器端SIP通讯----之监听篇
  5. 51nod1536不一样的猜数游戏
  6. windows 系统纯净版官网下载地址
  7. 视频教程-雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板)-微信开发
  8. 多个韵达快运的物流情况是怎么批量查询的
  9. 未来属于医学金融计算机没落,会计金融专业未来会没落？其实，这个专业的潜力比你想象中大！...
  10. dell服务器双系统怎么切换,dell工作站T5810装完双系统后开机没有windows选项