three+waypoints实现炫酷程序员个人简历主页代码
代码语言：html
所属分类：其他
代码描述：three+waypoints实现炫酷程序员个人简历主页代码
代码标签： three waypoints 炫酷 程序员 简历 个人 主页
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* File: base.css */
@import url(https://fonts.googleapis.com/css?family=Dosis:200:400|Lato:100,300,400,900|Ubuntu:700|Source+Code+Pro:500|Open+Sans:300|Press+Start+2P);
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body,
html {
color: #2c2c2c;
min-width: 600px;
height: 100%;
background: gray;
font: 400 100%/1em 'Lato', sans-serif;
-webkit-font-smoothing: antialiased
}
::selection {
background: rgba(0, 184, 255, .09);
-webkit-text-shadow: 0 1px 1px #000;
text-shadow: 0 1px 1px #000;
color: #dadada
}
::-moz-selection {
background: rgba(0, 184, 255, .09);
text-shadow: 0 1px 1px #000;
color: #dadada
}
a {
text-decoration: none;
color: #168dff
}
a:hover {
color: #90bbff
}
ul {
list-style: none
}
section {
position: relative;
min-height: 110%;
background: #fff
}
.viewport {
width: 100%;
height: 100%;
-moz-perspective: 900px;
-ms-perspective: 900px;
-webkit-perspective: 900px;
perspective: 900px;
overflow: hidden
}
.viewport div {
outline: 1px solid transparent;
-webkit-text-stroke: .25px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.viewport .world {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60% 50%;
-moz-transform-origin: 60% 50%;
-ms-transform-origin: 60% 50%;
-o-transform-origin: 60% 50%;
transform-origin: 60% 50%
}
.title {
position: relative;
text-align: center;
overflow: hidden;
margin: 0 3%
}
.title:before {
content: '';
position: absolute;
left: 0;
top: 48%;
width: 100%;
height: 1px;
background: #c4c4c4;
pointer-events: none;
-webkit-touch-callout: none
}
.title h1 {
background: #fff;
z-index: 1;
position: relative;
display: inline-block;
font: 400 650%/130% 'Open Sans';
padding: 10px 35px 35px 60px;
text-transform: uppercase;
color: #131313;
letter-spacing: .15em;
-webkit-text-shadow: silver -1px 1px 0, #c2c2c2 -2px 2px 0, #c3c3c3 -3px 3px 0, #c5c5c5 -4px 4px 0, #c6c6c6 -5px 5px 0, #c8c8c8 -6px 6px 0, #c9c9c9 -7px 7px 0, #cbcbcb -8px 8px 0, #ccc -9px 9px 0, #cecece -10px 10px 0, #cfcfcf -11px 11px 0, #d1d1d1 -12px 12px 0, #d2d2d2 -13px 13px 0, #d4d4d4 -14px 14px 0, #d5d5d5 -15px 15px 0, #d7d7d7 -16px 16px 0, #d8d8d8 -17px 17px 0, #dadada -18px 18px 0, #dbdbdb -19px 19px 0, #ddd -20px 20px 0, #dfdfdf -21px 21px 0, #e0e0e0 -22px 22px 0, #e2e2e2 -23px 23px 0, #e3e3e3 -24px 24px 0, #e5e5e5 -25px 25px 0, #e6e6e6 -26px 26px 0, #e8e8e8 -27px 27px 0, #e9e9e9 -28px 28px 0, #ebebeb -29px 29px 0, #ececec -30px 30px 0, #eee -31px 31px 0, #efefef -32px 32px 0, #f1f1f1 -33px 33px 0, #f2f2f2 -34px 34px 0, #f4f4f4 -35px 35px 0, #f5f5f5 -36px 36px 0, #f7f7f7 -37px 37px 0, #f8f8f8 -38px 38px 0, #fafafa -39px 39px 0, #fbfbfb -40px 40px 0, #fdfdfd -41px 41px 0, #fff -42px 42px 0;
text-shadow: silver -1px 1px 0, #c2c2c2 -2px 2px 0, #c3c3c3 -3px 3px 0, #c5c5c5 -4px 4px 0, #c6c6c6 -5px 5px 0, #c8c8c8 -6px 6px 0, #c9c9c9 -7px 7px 0, #cbcbcb -8px 8px 0, #ccc -9px 9px 0, #cecece -10px 10px 0, #cfcfcf -11px 11px 0, #d1d1d1 -12px 12px 0, #d2d2d2 -13px 13px 0, #d4d4d4 -14px 14px 0, #d5d5d5 -15px 15px 0, #d7d7d7 -16px 16px 0, #d8d8d8 -17px 17px 0, #dadada -18px 18px 0, #dbdbdb -19px 19px 0, #ddd -20px 20px 0, #dfdfdf -21px 21px 0, #e0e0e0 -22px 22px 0, #e2e2e2 -23px 23px 0, #e3e3e3 -24px 24px 0, #e5e5e5 -25px 25px 0, #e6e6e6 -26px 26px 0, #e8e8e8 -27px 27px 0, #e9e9e9 -28px 28px 0, #ebebeb -29px 29px 0, #ececec -30px 30px 0, #eee -31px 31px 0, #efefef -32px 32px 0, #f1f1f1 -33px 33px 0, #f2f2f2 -34px 34px 0, #f4f4f4 -35px 35px 0, #f5f5f5 -36px 36px 0, #f7f7f7 -37px 37px 0, #f8f8f8 -38px 38px 0, #fafafa -39px 39px 0, #fbfbfb -40px 40px 0, #fdfdfd -41px 41px 0, #fff -42px 42px 0
}
.clear {
clear: both
}
.simage {
position: relative;
height: 170px;
margin: 30px 0 60px 0
}
.simage div {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60%;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
border: 10px solid #ebebeb;
border-right: none
}
.simage.left div {
right: auto;
left: 0;
border: 10px solid #ebebeb;
border-left: none
}
.y-slider {
display: inline;
position: relative;
color: transparent;
text-align: right
}
.y-slider>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden
}
.y-slider>div ul {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: 150ms;
-moz-transition: 150ms;
-o-transition: 150ms;
transition: 150ms
}
.opera .y-slider>div ul {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
.y-slider>div ul>li {
display: block;
white-space: nowrap;
color: #168dff
}
a.nice-link {
position: relative;
color: #168dff
}
a.nice-link.underline:after {
border-bottom: 1px solid #0071ca
}
a.nice-link:after {
content: attr(data-text);
position: absolute;
left: 0;
top: auto;
white-space: nowrap;
overflow: hidden;
color: #0071ca;
min-height: 100%;
width: 0;
max-width: 100%;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s
}
a.nice-link:hover {
color: #168dff
}
a.nice-link:hover:after {
width: 100%
}
.ycenter {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 0;
text-align: center
}
.ycenter .xcenter {
display: inline-block
}
.loader {
position: relative;
width: 100px;
height: 100px;
margin-top: -100%;
text-align: center;
text-transform: uppercase;
font-size: 40%
}
.loader>div {
position: absolute;
left: -2px;
top: -2px;
border: 2px solid transparent;
border-top: 2px solid #0591ff;
border-radius: 50%;
-moz-animation: spin linear infinite;
-o-animation: spin linear infinite;
-webkit-animation: spin linear infinite;
animation: spin linear infinite
}
.loader>div:nth-of-type(1) {
padding: 40%;
margin: 10%;
-webkit-animation-duration: 800ms;
-moz-animation-duration: 800ms;
-o-animation-duration: 800ms;
animation-duration: 800ms;
z-index: 3
}
.loader>div:nth-of-type(2) {
padding: 50%;
margin: 0%;
border-top-width: 6px;
-webkit-animation-duration: 900ms;
-moz-animation-duration: 900ms;
-o-animation-duration: 900ms;
animation-duration: 900ms;
z-index: 2
}
.loader>div:nth-of-type(3) {
padding: 70%;
margin: -20%;
-webkit-animation-duration: 1000ms;
-moz-animation-duration: 1000ms;
-o-animation-duration: 1000ms;
animation-duration: 1000ms;
z-index: 1
}
.loader>span {
position: relative;
width: 100%;
height: 100%;
display: block
}
.loader>span>span {
position: absolute;
width: 100%;
left: 0;
top: 50%;
margin-top: -5px;
z-index: 5
}
.loader.hide {
-webkit-transition: opacity 500ms ease, color 350ms ease;
-moz-transition: opacity 500ms ease, color 350ms ease;
-o-transition: opacity 500ms ease, color 350ms ease;
transition: opacity 500ms ease, color 350ms ease;
color: transparent;
opacity: 0
}
.loader.hide>div {
-webkit-transition: margin 550ms cubic-bezier(.41, -1.5, .64, 1), padding 550ms cubic-bezier(.41, -1.5, .64, 1), border 200ms ease-in;
-moz-transition: margin 550ms cubic-bezier(.41, -1.5, .64, 1), padding 550ms cubic-bezier(.41, -1.5, .64, 1), border 200ms ease-in;
-o-transition: margin 550ms cubic-bezier(.41, -1.5, .64, 1), padding 550ms cubic-bezier(.41, -1.5, .64, 1), border 200ms ease-in;
transition: margin 550ms cubic-bezier(.41, -1.5, .64, 1), padding 550ms cubic-bezier(.41, -1.5, .64, 1), border 200ms ease-in;
border-top-color: #000;
margin: 50%;
padding: 0%
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotateZ(360deg)
}
to {
-moz-transform: rotateZ(0deg)
}
}
@keyframes spin {
from {
transform: rotateZ(360deg)
}
to {
transform: rotateZ(0deg)
}
}
@-moz-keyframes typing {
to {
width: 100%
}
}
@-webkit-keyframes typing {
to {
width: 100%
}
}
@keyframes typing {
to {
width: 100%
}
}
@-moz-keyframes blink {
0%, 50% {
border-color: transparent
}
}
@-webkit-keyframes blink {
0%, 50% {
border-color: transparent
}
}
@keyframes blink {
0%, 50% {
border-color: transparent
}
}
@-moz-keyframes blink2 {
0%, 50% {
border-color: transparent
}
}
@-webkit-keyframes blink2 {
0%, 50% {
border-color: transparent
}
}
@keyframes blink2 {
0%, 50% {
border-color: transparent
}
}
@-webkit-keyframes bounce-top {
100% {
top: 180%
}
}
@-moz-keyframes bounce-top {
100% {
top: 180%
}
}
@keyframes bounce-top {
100% {
top: 180%
}
}
/* File: main.css */
#main {
z-index: 0;
min-height: 600px;
height: 110%
}
#main .viewport {
position: fixed;
background-attachment: fixed;
background-color: #fff;
background-image: -webkit-radial-gradient(50% 80%, ellipse farthest-corner, #fff 35%, #ccc);
background-image: -moz-radial-gradient(50% 80%, ellipse farthest-corner, #fff 35%, #ccc);
background-image: -ms-radial-gradient(50% 80%, ellipse farthest-corner, #fff 35%, #ccc);
background-image: -o-radial-gradient(50% 80%, ellipse farthest-corner, #fff 35%, #ccc);
background-image: radial-gradient(farthest-corner ellipse at 50% 80%, #fff 35%, #ccc)
}
.opera #main .viewport {
background: #fff
}
#main .viewport:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
z-index: 100;
background: #000;
pointer-events: none;
-webkit-touch-callout: none
}
#main .viewport:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 0;
z-index: 100;
background: #000;
pointer-events: none;
-webkit-touch-callout: none
}
#main .viewport>div:first-of-type {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-touch-callout: none;
z-index: 90;
opacity: 0;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDBCODRDQjIyMUQ2MTFFMzkzMDJGMzIzRUFFMEU1NDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDBCODRDQjMyMUQ2MTFFMzkzMDJGMzIzRUFFMEU1NDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMEI4NENCMDIxRDYxMUUzOTMwMkYzMjNFQUUwRTU0MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMEI4NENCMTIxRDYxMUUzOTMwMkYzMjNFQUUwRTU0MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmrkTaoAAAAYSURBVHjaYmBgYFBj+P//PwMTkMUAEGAAGaMDJpGnCgQAAAAASUVORK5CYII=');
*background: url(./mask.png)
}
#main .world>div {
position: absolute
}
#main canvas {
pointer-events: none;
-webkit-touch-callout: none;
position: absolute;
width: 100%;
height: 100%;
opacity: 0
}
#main #scroll-sown {
opacity: 0;
-webkit-transform: zoom(0);
-moz-transform: zoom(0);
-ms-transform: zoom(0);
-o-transform: zoom(0);
transform: zoom(0);
position: absolute;
left: 90%;
top: 85%;
white-space: nowrap;
text-transform: uppercase;
font: 400 60% 'Lato'
}
#main-img {
position: absolute;
height: 110%;
right: 0;
bottom: -7.7%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
pointer-events: none;
-webkit-touch-callout: none;
max-height: 1100px;
opacity: 0
}
#main-hello-info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
#main-hello-info>div {
font: 300 20% 'Dosis';
position: absolute;
bottom: 0
}
#main-hello-info>div>div {
position: relative;
padding-left: 5%;
white-space: nowrap;
color: #104281;
text-indent: -140%
}
#main-hello-info>div>div>* {
text-indent: 0
}
#main-hello-info>div>div strong,
#main-hello-info>div>div a {
font-weight: 700;
color: #000
}
#main-hello-info>div>div strong:after,
#main-hello-info>div>div a:after {
color: #0071ca
}
#main-hello-info>div>div:before {
content: 'I';
position: absolute;
left: 0;
top: 23%;
height: 0;
color: transparent;
border-left: 3px solid #2c2c2c
}
#main-hello-info>div>div .big {
position: relative;
display: inline-block
}
#main-hello-info>div>div .big>strong {
position: absolute;
left: 0;
bottom: 0;
font: 100 105% 'Open Sans';
line-height: 78%
}
#main-hello-info>div>div .big>strong span {
position: absolute;
bottom: -2%;
left: 95%;
font: 100 6% 'Open Sans'
}
#main-hello {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
left: 3%;
top: 3%;
text-transform: uppercase;
position: relative;
padding-left: 6.5%;
font: 100 700% 'Lato'
}
#main-hello>figure {
display: inline-block;
position: relative;
color: transparent;
padding-right: 7%
}
#main-hello>figure>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden
}
#main-hello>figure>div span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #2c2c2c;
left: -100%
}
#main-hello>div {
position: absolute;
border-left: 3px solid #2c2c2c
}
#main-hello>div:nth-of-type(1) {
left: 3.5%;
top: 52%;
height: 0
}
#main-hello>div:nth-of-type(2) {
left: 20%;
top: -100%;
height: 340%;
width: 100%;
border: none;
overflow: hidden
}
#main-hello>div:nth-of-type(2)>span {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-left: 3px solid #2c2c2c
}
#main-hello>div:nth-of-type(3) {
left: 20%;
top: 52%;
width: 0;
border-left: none;
border-bottom: 3px solid #2c2c2c
}
#main-box1 {
width: 100%;
height: 100%;
left: 91%;
bottom: 110%;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
pointer-events: none;
-webkit-touch-callout: none;
background: rgba(255, 255, 255, .5)
}
#main-box2 {
width: 200%;
height: 100%;
left: 60%;
top: 51.3%;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
pointer-events: none;
-webkit-touch-callout: none;
background: rgba(255, 255, 255, .5)
}
#main-skills {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
left: -10%;
top: 52%;
padding: 2% 2% 2% 10%;
color: #fff;
background: rgba(0, 0, 0, .85);
font: 320% 'Press Start 2P';
text-transform: uppercase;
white-space: nowrap;
opacity: 0
}
#main-skills span {
color: #168dff
}
#main-name {
right: -30%;
top: 36%;
text-align: right
}
#main-name div {
font: 700 320% 'Ubuntu';
color: #1a3c5c
}
#main-name span {
font: 400 100% 'Lato';
display: block;
text-transform: uppercase;
margin-right: -100%;
opacity: 0
}
html.csstransforms3d.preserve3d #main-box2 {
-webkit-transform: translate3D(0, 65px, -85px) rotate(-30deg);
-moz-transform: translate3D(0, 65px, -85px) rotate(-30deg);
-ms-transform: translate3D(0, 65px, -85px) rotate(-30deg);
-o-transform: translate3D(0, 65px, -85px) rotate(-30deg);
transform: translate3D(0, 65px, -85px) rotate(-30deg)
}
html.csstransforms3d.preserve3d #main-hello {
-webkit-transform: translateZ(-10px) rotate(-10deg);
-moz-transform: translateZ(-10px) rotate(-10deg);
-ms-transform: translateZ(-10px) rotate(-10deg);
-o-transform: translateZ(-10px) rotate(-10deg);
transform: translateZ(-10px) rotate(-10deg)
}
html.csstransforms3d.preserve3d #main-img {
-webkit-transform: translate3d(200%, 0, -600px) scale(1.6);
-moz-transform: translate3d(200%, 0, -600px) scale(1.6);
-ms-transform: translate3d(200%, 0, -600px) scale(1.6);
-o-transform: translate3d(200%, 0, -600px) scale(1.6);
transform: translate3d(200%, 0, -600px) scale(1.6);
-webkit-transform-origin: 20% 40%;
-moz-transform-origin: 20% 40%;
-ms-transform-origin: 20% 40%;
-o-transform-origin: 20% 40%;
transform-origin: 20% 40%
}
html.csstransforms3d.preserve3d #main-skills {
-webkit-transform: translateZ(200px) rotate(60deg) rotateY(100deg) scale(0);
-moz-transform: translateZ(200px) rotate(60deg) rotateY(100deg) scale(0);
-ms-transform: translateZ(200px) rotate(60deg) rotateY(100deg) scale(0);
-o-transform: translateZ(200px) rotate(60deg) rotateY(100deg) scale(0);
transform: translateZ(200px) rotate(60deg) rotateY(100deg) scale(0)
}
html.csstransforms3d.preserve3d #main-name {
-webkit-transform: translate3D(50px, 0, -80px);
-moz-transform: translate3D(50px, 0, -80px);
-ms-transform: translate3D(50px, 0, -80px);
-o-transform: translate3D(50px, 0, -80px);
transform: translate3D(50px, 0, -80px)
}
html.csstransforms3d.preserve3d #main-name div {
-webkit-transform: translate3D(-45%, 0, 130px);
-moz-transform: translate3D(-45%, 0, 130px);
-ms-transform: translate3D(-45%, 0, 130px);
-o-transform: translate3D(-45%, 0, 130px);
transform: translate3D(-45%, 0, 130px)
}
#main.play .viewport:before,
#main.play .viewport:after {
-webkit-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-o-transition: 1s ease-out;
transition: 1s ease-out;
height: 3%
}
#main.play .viewport>div:first-of-type {
-webkit-transition: 3s 0s;
-moz-transition: 3s 0s;
-o-transition: 3s 0s;
transition: 3s 0s;
opacity: .7
}
#main.play .viewport canvas {
-webkit-transition: 3s 0s;
-moz-transition: 3s 0s;
-o-transition: 3s 0s;
transition: 3s 0s;
opacity: 1
}
#main.play #scroll-sown {
opacity: 1;
-webkit-transform: zoom(1);
-moz-transform: zoom(1);
-ms-transform: zoom(1);
-o-transform: zoom(1);
transform: zoom(1);
-webkit-transition: .4s 3s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .4s 3s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .4s 3s cubic-bezier(.24, 0, .13, 1.44);
transition: .4s 3s cubic-bezier(.24, 0, .13, 1.44)
}
#main.play #main-hello-info>div>div {
margin-left: 0;
text-indent: 0
}
#main.play #main-hello-info>div>div:before {
-webkit-transition: .1s 1.2s;
-moz-transition: .1s 1.2s;
-o-transition: .1s 1.2s;
transition: .1s 1.2s;
height: 60%
}
#main.play #main-hello-info>div>div:nth-of-type(1) {
-webkit-transition: .35s 1.3s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .35s 1.3s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .35s 1.3s cubic-bezier(.24, 0, .13, 1.44);
transition: .35s 1.3s cubic-bezier(.24, 0, .13, 1.44)
}
#main.play #main-hello-info>div>div:nth-of-type(2) {
-webkit-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44)
}
#main.play #main-hello-info>div>div:nth-of-type(3) {
-webkit-transition: .35s 1.5s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .35s 1.5s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .35s 1.5s cubic-bezier(.24, 0, .13, 1.44);
transition: .35s 1.5s cubic-bezier(.24, 0, .13, 1.44)
}
#main.play #main-hello-info>div>div:nth-of-type(4) {
-webkit-transition: .35s 1.6s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .35s 1.6s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .35s 1.6s cubic-bezier(.24, 0, .13, 1.44);
transition: .35s 1.6s cubic-bezier(.24, 0, .13, 1.44)
}
#main.play #main-hello-info>div>div .big {
-webkit-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
transition: .35s 1.4s cubic-bezier(.24, 0, .13, 1.44);
font-size: 650%
}
#main.play #main-hello>figure>div span {
-webkit-transition: .6s 1s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .6s 1s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .6s 1s cubic-bezier(.24, 0, .13, 1.44);
transition: .6s 1s cubic-bezier(.24, 0, .13, 1.44);
left: 0
}
#main.play #main-hello>div:nth-of-type(1) {
-webkit-transition: .1s 1.2s ease-out;
-moz-transition: .1s 1.2s ease-out;
-o-transition: .1s 1.2s ease-out;
transition: .1s 1.2s ease-out;
top: 24%;
height: 59%
}
#main.play #main-hello>div:nth-of-type(2)>span {
-webkit-transition: .2s 1s ease-out;
-moz-transition: .2s 1s ease-out;
-o-transition: .2s 1s ease-out;
transition: .2s 1s ease-out;
height: 75%
}
#main.play #main-hello>div:nth-of-type(3) {
-webkit-transition: .2s 1s ease-in;
-moz-transition: .2s 1s ease-in;
-o-transition: .2s 1s ease-in;
transition: .2s 1s ease-in;
left: 3.5%;
width: 16.5%
}
#main.play #main-box1 {
-webkit-transition: .4s 1.5s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .4s 1.5s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .4s 1.5s cubic-bezier(.24, 0, .13, 1.44);
transition: .4s 1.5s cubic-bezier(.24, 0, .13, 1.44);
bottom: 50%
}
#main.play #main-box2 {
-webkit-transition: .4s 1.3s ease-out;
-moz-transition: .4s 1.3s ease-out;
-o-transition: .4s 1.3s ease-out;
transition: .4s 1.3s ease-out;
left: -10%
}
#main.play #main-name {
-webkit-transition: .6s 1.7s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .6s 1.7s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .6s 1.7s cubic-bezier(.24, 0, .13, 1.44);
transition: .6s 1.7s cubic-bezier(.24, 0, .13, 1.44);
right: 3%
}
#main.play #main-name span {
-webkit-transition: .6s 1.85s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .6s 1.85s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .6s 1.85s cubic-bezier(.24, 0, .13, 1.44);
transition: .6s 1.85s cubic-bezier(.24, 0, .13, 1.44);
opacity: 1;
margin-right: 0
}
#main.play #main-skills {
-webkit-transition: .6s 1s ease-out;
-moz-transition: .6s 1s ease-out;
-o-transition: .6s 1s ease-out;
transition: .6s 1s ease-out;
opacity: 1
}
#main.play #main-img {
-webkit-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
opacity: 1
}
html.csstransforms3d.preserve3d #main.play #main-skills {
-webkit-transition: .6s 1s ease-out;
-moz-transition: .6s 1s ease-out;
-o-transition: .6s 1s ease-out;
transition: .6s 1s ease-out;
-webkit-transform: translateZ(200px) rotate(-10deg) rotateY(-10deg) scale(.7);
-moz-transform: translateZ(200px) rotate(-10deg) rotateY(-10deg) scale(.7);
-ms-transform: translateZ(200px) rotate(-10deg) rotateY(-10deg) scale(.7);
-o-transform: translateZ(200px) rotate(-10deg) rotateY(-10deg) scale(.7);
transform: translateZ(200px) rotate(-10deg) rotateY(-10deg) scale(.7);
opacity: 2
}
html.csstransforms3d.preserve3d #main.play #main-img {
-webkit-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
-moz-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
-o-transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
transition: .5s 1.1s cubic-bezier(.24, 0, .13, 1.44);
opacity: 1;
-webkit-transform: translate3d(0, 0, -600px) scale(1.6);
-moz-transform: translate3d(0, 0, -600px) scale(1.6);
-ms-transform: translate3d(0, 0, -600px) scale(1.6);
-o-transform: translate3d(0, 0, -600px) scale(1.6);
transform: translate3d(0, 0, -600px) scale(1.6)
}
#like-slider {
text-align: left
}
#like-slider li {
color: #000
}
#img { display: none; }
</style>
</head>
<body>
<section id="main">
<div class="viewport">
<div></div>
<canvas id="cvs1"></canvas>
<div class="ycenter">
<div class="xcenter">
<div class="loader">
<div></div>
<div></div>
<div></div>
<span><span>Click here</span></span>
</div>
</div>
</div>
<div class="world">
<div id="main-hello">
<div></div>
<div>
<span></span>
<div id="main-hello-info">
<div>
<div>
am
<div class="big"><strong>22<span>years old</span></strong></div>
</div>
<div>live in <a class="nice-link" data-text="Warsaw">Warsaw</a></div>
<div>like <strong><span id="like-slider">Programming</span></strong></div>
<div>study at <a class="nice-link" data-text="WWSI">WWSI</a></div>
</div>
</div>
</div>
<div></div>
<figure>
ello
<div>
<span>ello</span>
</div>
</figure>
</div>
<div id="main-box1"></div>
<div id="main-box2"></div>
<img id="main-img" src="//repo.bfw.wiki/bfwrepo/images/music/changpian/dex.png" alt="Damian Drygiel" />
<div id="main-skills">
<div id="skills-slider">.NET</div>
Programmer
</div>
<div id="main-name">
<div>Damian</div>
<span>Drygiel</span>
</div>
</div>
<a id="scroll-sown" target="_blank">Full screen</a>
</div>
</section>
<img id="img" src="data:image/jpg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0