笔记本翻页html,HTML5 笔记本翻转入场并打开的3D动画

CSS

语言：

CSSSCSS

确定

/*---------*

* Imports *

*---------*/

@import "https://fonts.googleapis.com/css?family=Heebo:300";

/*------------------*

* Global variables *

*------------------*/

/*------------*

* CSS Styles *

*------------*/

*,

*:before,

*:after {

box-sizing: border-box;

margin: 0;

padding: 0;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

body {

background-color: #fff;

font-family: 'Heebo', sans-serif;

font-weight: 300;

}

.animation-wrapper {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-color: rgba(0, 0, 0, 0.05);

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 100vh;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

overflow: hidden;

-webkit-perspective: 600px;

perspective: 600px;

position: relative;

width: 100vw;

}

.laptop {

height: 150px;

position: relative;

top: 100px;

-webkit-transform: rotateY(180deg) rotateX(-60deg);

transform: rotateY(180deg) rotateX(-60deg);

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

width: 200px;

-webkit-animation: 11.5s forwards movie-laptop;

animation: 11.5s forwards movie-laptop;

}

.base {

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

transform-origin: 50% 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: 11.5s forwards movie-base;

animation: 11.5s forwards movie-base;

-webkit-transition: -webkit-transform 0.5s;

transition: -webkit-transform 0.5s;

transition: transform 0.5s;

transition: transform 0.5s, -webkit-transform 0.5s;

}

.base div {

height: 150px;

left: 0;

position: absolute;

top: 0;

width: 200px;

}

.base .base-top,

.base .base-bottom {

background-color: #c8c8c8;

}

.base .base-top {

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/149229/keyboard.png");

background-position: center 15px;

background-repeat: no-repeat;

background-size: 190px auto;

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.base .base-top:after {

background-color: #b4b4b4;

border-radius: 2px;

bottom: 5px;

content: '';

height: 50px;

left: calc(50% - 30px);

position: absolute;

width: 60px;

}

.base .base-bottom {

-webkit-transform: translateZ(6px);

transform: translateZ(6px);

}

.base .base-front,

.base .base-back {

background-color: #bebebe;

height: 6px;

}

.base .base-front {

-webkit-transform: rotateX(90deg) translateZ(3px) translateY(3px);

transform: rotateX(90deg) translateZ(3px) translateY(3px);

}

.base .base-back {

-webkit-transform: rotateX(90deg) translateZ(-147px) translateY(3px);

transform: rotateX(90deg) translateZ(-147px) translateY(3px);

}

.base .base-left,

.base .base-right {

background-color: #b4b4b4;

height: 6px;

left: calc(50% - 75px);

width: 150px;

}

.base .base-left {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(72px) translateY(3px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(72px) translateY(3px);

}

.base .base-right {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(72px) translateY(3px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(72px) translateY(3px);

}

.screen {

bottom: 150px;

height: 150px;

left: 0;

position: absolute;

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

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

transform-origin: 50% 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

width: 200px;

-webkit-animation: 11.5s forwards movie-screen;

animation: 11.5s forwards movie-screen;

-webkit-transition: -webkit-transform 0.5s;

transition: -webkit-transform 0.5s;

transition: transform 0.5s;

transition: transform 0.5s, -webkit-transform 0.5s;

}

.screen div {

height: 150px;

left: 0;

position: absolute;

top: 0;

width: 200px;

}

.screen .screen-front {

background-color: #3c3c3c;

background-image: url("/uploads/161001/normal3.jpg");

background-position: 50% 50%;

background-size: 100% 100%;

border: 5px solid #000;

overflow: hidden;

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.screen .screen-front:after {

background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

content: '';

height: 300px;

left: 0;

position: absolute;

top: 0;

-webkit-transform: rotateZ(-45deg) translateX(-100px) translateY(-320px);

transform: rotateZ(-45deg) translateX(-100px) translateY(-320px);

width: 400px;

}

.screen .screen-back {

background-color: #c8c8c8;

background-image: url("/uploads/161101/Apple-logo-white-md.png");

background-position: 50% 50%;

background-repeat: no-repeat;

background-size: 25px 30px;

-webkit-transform: translateZ(3px);

transform: translateZ(3px);

}

.screen .screen-left,

.screen .screen-right {

background-color: #bebebe;

height: 3px;

left: calc(50% - 75px);

width: 150px;

}

.screen .screen-left {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(73.5px) translateY(1.5px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(73.5px) translateY(1.5px);

}

.screen .screen-right {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(73.5px) translateY(1.5px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(73.5px) translateY(1.5px);

}

.screen .screen-top,

.screen .screen-bottom {

background-color: #b4b4b4;

height: 3px;

}

.screen .screen-top {

-webkit-transform: rotateX(90deg) translateZ(1.5px) translateY(1.5px);

transform: rotateX(90deg) translateZ(1.5px) translateY(1.5px);

}

.screen .screen-bottom {

-webkit-transform: rotateX(90deg) translateZ(-148.5px) translateY(1.5px);

transform: rotateX(90deg) translateZ(-148.5px) translateY(1.5px);

}

.js-click .base {

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

transform: rotateX(-45deg);

}

.js-click .screen {

-webkit-transform: rotateX(135deg);

transform: rotateX(135deg);

}

footer {

bottom: 0;

color: #333;

left: 0;

padding: 20px;

position: fixed;

text-align: right;

width: 100%;

z-index: 1;

}

footer a {

color: inherit;

text-decoration: none;

}

header {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

height: 100vh;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

left: calc(50% - 200px);

padding: 20px;

position: fixed;

top: 0;

visibility: hidden;

width: 400px;

z-index: 1;

-webkit-animation: 11.5s forwards movie-title;

animation: 11.5s forwards movie-title;

}

header h1,

header h2 {

color: #333;

font-weight: 300;

text-align: center;

}

header h1 {

font-size: 36px;

}

header h2 {

font-size: 24px;

}

/*------------*

* Animations *

*------------*/

@-webkit-keyframes movie-base {

0%, 75% {

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

transform: rotateX(-45deg);

}

100% {

-webkit-transform: rotateX(0);

transform: rotateX(0);

}

}

@keyframes movie-base {

0%, 75% {

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

transform: rotateX(-45deg);

}

100% {

-webkit-transform: rotateX(0);

transform: rotateX(0);

}

}

@-webkit-keyframes movie-laptop {

0%, 50% {

top: 200px;

-webkit-transform: translateZ(600px) rotateY(0deg) rotateX(-15deg);

transform: translateZ(600px) rotateY(0deg) rotateX(-15deg);

}

75% {

top: 200px;

-webkit-transform: translateZ(200px) rotateY(0deg) rotateX(-15deg);

transform: translateZ(200px) rotateY(0deg) rotateX(-15deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

100% {

top: 200px;

-webkit-transform: translateY(-100px) rotateY(180deg) rotateX(-60deg);

transform: translateY(-100px) rotateY(180deg) rotateX(-60deg);

-webkit-animation-timing-function: ease;

animation-timing-function: ease;

}

}

@keyframes movie-laptop {

0%, 50% {

top: 200px;

-webkit-transform: translateZ(600px) rotateY(0deg) rotateX(-15deg);

transform: translateZ(600px) rotateY(0deg) rotateX(-15deg);

}

75% {

top: 200px;

-webkit-transform: translateZ(200px) rotateY(0deg) rotateX(-15deg);

transform: translateZ(200px) rotateY(0deg) rotateX(-15deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

100% {

top: 200px;

-webkit-transform: translateY(-100px) rotateY(180deg) rotateX(-60deg);

transform: translateY(-100px) rotateY(180deg) rotateX(-60deg);

-webkit-animation-timing-function: ease;

animation-timing-function: ease;

}

}

@-webkit-keyframes movie-screen {

0%, 75% {

-webkit-transform: rotateX(135deg);

transform: rotateX(135deg);

}

100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

}

}

@keyframes movie-screen {

0%, 75% {

-webkit-transform: rotateX(135deg);

transform: rotateX(135deg);

}

100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

}

}

@-webkit-keyframes movie-title {

0%, 20% {

opacity: 0;

visibility: visible;

}

60%,

75% {

opacity: 1;

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

opacity: 0;

-webkit-transform: translateY(-150px);

transform: translateY(-150px);

}

}

@keyframes movie-title {

0%, 20% {

opacity: 0;

visibility: visible;

}

60%,

75% {

opacity: 1;

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

opacity: 0;

-webkit-transform: translateY(-150px);

transform: translateY(-150px);

}

}