<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 笑脸面具先生</title>
<style>
.wf-active .heading,
.wf-inactive .heading {
opacity: 1;
}
.loaded .author,
.loaded .more-details {
opacity: 1;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
body {
background: #e8e8e8;
}
body .heading {
font-family: 'Lato', sans-serif;
font-size: 55px;
font-weight: bold;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
}
body .heading div.title {
position: relative;
background: rgba(232, 232, 232, 0.5);
display: inline-block;
padding: 10px;
}
body .heading div.title .small {
font-size: 25px;
font-weight: 400;
}
@media (max-width: 680px) {
body .heading {
font-size: 30px;
}
}
body .author,
body .more-details {
opacity: 0;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
body .more-details {
color: #000;
background-color: #f5f5f5;
position: fixed;
bottom: 0;
right: 0;
padding: 10px 15px;
}
body .author:hover {
background: #fff;
}
body .author:hover > img {
box-shadow: 0 0 0 5px #bbb, 0 0 0 20px #fff;
}
body .mask-container {
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 200px);
width: 300px;
height: 400px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (max-height: 600px) {
body .mask-container {
top: 150px;
}
}
body .mask-container .mask-shadow {
background: #a1a1a1;
width: 350px;
height: 383px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: 70px;
top: 53px;
border-bottom-left-radius: 140px;
box-shadow: 200px 0 #a1a1a1, 400px 0 #a1a1a1, 600px 0 #a1a1a1, 800px 0 #a1a1a1, 1000px 0 #a1a1a1, 1200px 0 #a1a1a1, 1400px 0 #a1a1a1, 1600px 0 #a1a1a1, 1800px 0 #a1a1a1, 2000px 0 #a1a1a1, 2200px 0 #a1a1a1, 2400px 0 #a1a1a1, 2600px 0 #a1a1a1, 2800px 0 #a1a1a1, 3000px 0 #a1a1a1, 3200px 0 #a1a1a1, 3400px 0 #a1a1a1, 3600px 0 #a1a1a1, 3800px 0 #a1a1a1, 4000px 0 #a1a1a1;
border-right: 1px solid #a1a1a1;
}
body .mask-container .mask-base {
background: #e8e8e8;
border-bottom: 1px solid #a1a1a1;
position: absolute;
width: 320px;
height: 470px;
bottom: 32px;
left: -48px;
border-bottom-left-radius: 55px;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
border-bottom-right-radius: 210px 250px;
}
body .mask-container .mask-base:before {
content: ' ';
background: #e8e8e8;
position: absolute;
width: 250px;
height: 250px;
right: -100px;
bottom: 110px;
border-bottom-right-radius: 350px;
-webkit-transform: rotate(-22deg);
-moz-transform: rotate(-22deg);
-ms-transform: rotate(-22deg);
-o-transform: rotate(-22deg);
}
body .mask-container .mask-base:after {
content: ' ';
background: #e8e8e8;
position: absolute;
width: 150px;
height: 150px;
left: -5px;
bottom: 5px;
border-bottom-left-radius: 190px;
border-bottom-right-radius: 190px;
}
body .mask-container .pre-eye-brow-shadow-left {
width: 79px;
height: 123px;
background: #cfcfcf;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
top: 32px;
left: 53px;
border-top-right-radius: 80px;
border-top-left-radius: 5px;
}
body .mask-container .pre-eye-brow-shadow-left:before {
content: ' ';
width: 50px;
height: 60px;
position: absolute;
background: #cfcfcf;
bottom: -60px;
right: 0px;
}
body .mask-container .pre-eye-brow-shadow-right {
position: absolute;
width: 250px;
height: 250px;
right: -41px;
bottom: 229px;
border-bottom-right-radius: 350px;
-webkit-transform: rotate(-62deg);
-moz-transform: rotate(-62deg);
-ms-transform: rotate(-62deg);
-o-transform: rotate(-62deg);
overflow: hidden;
}
body .mask-container .pre-eye-brow-shadow-right:before {
content: ' ';
width: 92px;
height: 143px;
background: #cfcfcf;
position: absolute;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
top: 109px;
left: 44px;
border-top-right-radius: 80px;
border-top-left-radius: 5px;
}
body .mask-container .pre-eye-brow-left {
width: 66px;
height: 57px;
position: absolute;
border: 13px solid #e8e8e8;
border-bottom: none;
border-right: none;
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
left: 40px;
top: 36px;
border-top-left-radius: 80px 70px;
}
body .mask-container .pre-eye-brow-left:before {
content: ' ';
width: 13px;
height: 15px;
background: #e8e8e8;
position: absolute;
left: -13px;
bottom: -13px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
body .mask-container .pre-eye-brow-left:after {
content: ' ';
width: 15px;
height: 13px;
background: #e8e8e8;
position: absolute;
right: -7px;
top: -13px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
body .mask-container .pre-eye-brow-right {
width: 70px;
height: 60px;
position: absolute;
border: 13px solid #e8e8e8;
border-bottom: none;
border-right: none;
-webkit-transform: rotate(39deg);
-moz-transform: rotate(39deg);
-ms-transform: rotate(39deg);
-o-transform: rotate(39deg);
right: 33px;
top: 36px;
border-top-left-radius: 80px 70px;
}
body .mask-container .pre-eye-brow-right:before {
content: ' ';
width: 13px;
height: 15px;
background: #e8e8e8;
position: absolute;
left: -13px;
bottom: -12px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
body .mask-container .pre-eye-brow-right:after {
content: ' ';
width: 15px;
height: 13px;
background: #e8e8e8;
position: absolute;
right: -7px;
top: -13px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
body .mask-container .eye-brow-left {
width: 110px;
height: 100px;
position: absolute;
left: 15px;
top: 70px;
border-top: 15px solid #121212;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
border-top-left-radius: 120px 110px;
border-top-right-radius: 120px 50px;
z-index: 1;
}
body .mask-container .eye-brow-left:before {
content: ' ';
width: 50px;
height: 15px;
background: #121212;
position: absolute;
right: 0px;
top: -7px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px 20px;
border-bottom-left-radius: 130px 30px;
