html5 在线检测,HTML5 在线测试结果（评分）页面模板

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

background: #4fc3f7;

}

.test-completion {

display: none;

z-index: 1000;

position: fixed;

top: 50%;

left: 50%;

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

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

max-width: 300px;

padding: 2em 10px;

text-align: center;

background-color: #fff;

-webkit-animation: slideIn 0.33s cubic-bezier(0.37, 0.82, 0.2, 1);

animation: slideIn 0.33s cubic-bezier(0.37, 0.82, 0.2, 1);

box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);

}

.test-completion:nth-child(1) {

-webkit-animation: slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1);

animation: slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1);

}

.test-completion:nth-child(2) {

-webkit-animation: slideIn 1s cubic-bezier(0.37, 0.82, 0.2, 1);

animation: slideIn 1s cubic-bezier(0.37, 0.82, 0.2, 1);

}

.test-completion:nth-child(3) {

-webkit-animation: slideIn 1.5s cubic-bezier(0.37, 0.82, 0.2, 1);

animation: slideIn 1.5s cubic-bezier(0.37, 0.82, 0.2, 1);

}

.test-completion:nth-child(4) {

-webkit-animation: slideIn 2s cubic-bezier(0.37, 0.82, 0.2, 1);

animation: slideIn 2s cubic-bezier(0.37, 0.82, 0.2, 1);

}

.test-completion .trophy {

width: 100px;

height: auto;

margin-bottom: 24px;

}

.test-completion .title {

display: block;

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

font-weight: 700;

color: #1a1a1a;

font-size: 1.5rem;

margin-bottom: 22px;

}

.test-completion .score {

display: block;

margin-bottom: 1rem;

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

font-size: 0.75rem;

font-weight: 400;

text-transform: uppercase;

color: #0288d1;

letter-spacing: 1px;

}

.test-completion .percent:before {

content: " (";

}

.test-completion .percent:after {

content: "%)";

}

.test-completion .b:before {

content: "/";

}

.test-completion p {

font-family: "Source Sans Pro", sans-serif;

color: #999999;

font-size: 15px;

padding: 0 15%;

line-height: 24px;

}

.test-completion .buttons {

position: relative;

width: 100%;

bottom: 0;

text-align: center;

}

.test-completion .buttons .button {

display: block;

text-decoration: none;

color: #fff;

text-transform: uppercase;

font-size: 12px;

border-radius: 5px;

margin: 0 10%;

height: 48px;

line-height: 48px;

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

font-weight: 400;

}

.test-completion .buttons .button:hover span {

border-bottom: 2px solid #fff;

}

.test-completion .buttons .button:not(:last-of-type) {

margin-bottom: 12px;

}

.test-completion .buttons .button.light {

background-color: #4fc3f7;

}

.test-completion .buttons .button.dark {

background-color: #0288d1;

}

@-webkit-keyframes slideIn {

0% {

opacity: 0;

-webkit-filter: blur(15px);

filter: blur(15px);

}

100% {

opacity: 1;

-webkit-filter: blur(0px);

filter: blur(0px);

}

}

@keyframes slideIn {

0% {

opacity: 0;

-webkit-filter: blur(15px);

filter: blur(15px);

}

100% {

opacity: 1;

-webkit-filter: blur(0px);

filter: blur(0px);

}

}

.blur {

position: absolute;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.7);

z-index: 1;

}