<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 3D 苹果笔记本动画DEMO演示</title>
<style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>
body {
background: #fff;
}
.macbook {
width: 150px;
height: 96px;
position: absolute;
left: 50%;
top: 50%;
margin: -75px 0 0 -48px;
perspective: 500px;
}
.shadow {
position: absolute;
width: 60px;
height: 0px;
left: 40px;
top: 160px;
transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
animation: shadow infinite 7s ease;
}
.inner {
z-index: 20;
position: absolute;
width: 150px;
height: 96px;
left: 0;
top: 0;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
animation: rotate infinite 7s ease;
}
.screen {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #ddd;
transform-style: preserve-3d;
transform-origin: 50% 93px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation: lid-screen infinite 7s ease;
background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
background-position: left bottom;
background-size: 300px 300px;
box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}
.screen .logo {
position: absolute;
width: 20px;
height: 24px;
left: 50%;
top: 50%;
margin: -12px 0 0 -10px;
transform: rotateY(180deg) translateZ(0.1px);
}
.screen .face-one {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #d3d3d3;
transform: translateZ(2px);
background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.screen .face-one .camera {
width: 3px;
height: 3px;
border-radius: 100%;
background: #000;
position: absolute;
left: 50%;
top: 4px;
margin-left: -1.5px;
}
.screen .face-one .display {
width: 130px;
height: 74px;
margin: 10px;
background: url("http://brkcan.net/fun/codepen/macbookss.png") no-repeat center center #000;
border-radius: 1px;
position: relative;
box-shadow: inset 0 0 2px rgba(0,0,0,1);
}
.screen .face-one .display .shade {
position: absolute;
left: 0;
top: 0;
width: 130px;
height: 74px;
background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
animation: screen-shade infinite 7s ease;
background-size: 300px 200px;
background-position: 0px 0px;
}
.screen .face-one span {
position: absolute;
top: 85px;
left: 57px;
font-size: 6px;
color: #666
}
.body {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #cbcbcb;
transform-style: preserve-3d;
transform-origin: 50% bottom;
transform: rotateX(-90deg);
animation: lid-body infinite 7s ease;
background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .face-one {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
transform-style: preserve-3d;
background: #dfdfdf;
animation: lid-keyboard-area infinite 7s ease;
transform: translateZ(-2px);
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .touchpad {
width: 40px;
height: 31px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 4px;
margin: -44px 0 0 -18px;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #888;
}
.body .keyboard {
width: 130px;
height: 45px;
position: absolute;
left: 7px;
top: 41px;
border-radius: 4px;
transform-style: preserve-3d;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #777;
padding: 0 0 0 2px;
}
.keyboard .key {
width: 6px;
height: 6px;
background: #444;
float: left;
margin: 1px;
transform: translateZ(-2px);
border-radius: 2px;
box-shadow: 0 -2px 0 #222;
animation: keys infinite 7s ease;
}
.key.space {
width: 45px;
}
.key.f {
height: 3px;
}
.body .pad {
width: 5px;
height: 5px;
background: #333;
border-radius: 100%;
position: absolute;
}
.pad.one {
left: 20px;
top: 20px;
}
.pad.two {
right: 20px;
top: 20px;
}
.pad.three {
right: 20px;
bottom: 20px;
}
.pad.four {
left: 20px;
bottom: 20px;
}
@keyframes rotate {
0% {
transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}
5% {
transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
}
20% {
transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
}
25% {
transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
}
60% {
transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
}
65% {
transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
}
80% {
transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
}
85% {
transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
}
87% {
transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
}
100% {
transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
}
}
@keyframes lid-screen {
0% {
transform: rotateX(0deg);
background-position: left bottom;
}
5% {
transform: rotateX(50deg);
background-position: left bottom;
}
20% {
transform: rotateX(-90deg);
background-position: -150px top;
}
25% {
transform: rotateX(15deg);
background-position: left bottom;
}
30% {
transform: rotateX(-5deg);
background-position: right top;
}
38% {
transform: rotateX(5deg);
background-position: right top;
}
48% {
transform: rotateX(0deg);
background-position: right top;
}
90% {
transform: rotateX(0deg)
CSS3实现3D苹果笔记本翻转动画效果源码.zip
需积分: 5 200 浏览量
2022-10-31
02:15:00
上传
评论
收藏 9KB ZIP 举报
CSS3实现3D苹果笔记本翻转动画效果源码.zip （5个子文件） 
132687041098062696 css 
style.css 7KB normalize.css 2KB
index.html 13KB js index.js 138B prefixfree.min.js 6KB资源评论
