<!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 3D分层模型演示动画</title>
<style>
@keyframes layer_2 {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes layer_3 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes layer_4 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#webpage {
width: 200px;
height: auto;
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
@media screen and (max-width: 560px) {
#webpage {
width: 100px;
}
}
#webpage .layer {
width: 240px;
height: 460px;
position: absolute;
transform: rotate3d(45, 20, -45, 75deg);
}
@media screen and (max-width: 560px) {
#webpage .layer {
width: 120px;
height: 230px;
}
}
#webpage .layer .w_header {
width: 100%;
height: 75px;
}
@media screen and (max-width: 560px) {
#webpage .layer .w_header {
height: 37.5px;
}
}
#webpage .layer .w_main {
width: 100%;
height: 250px;
margin-top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
@media screen and (max-width: 560px) {
#webpage .layer .w_main {
height: 125px;
margin-top: 25px;
}
}
#webpage .layer .w_main .w_card {
width: 26%;
height: 75px;
margin-bottom: 25px;
}
@media screen and (max-width: 560px) {
#webpage .layer .w_main .w_card {
height: 37.5px;
margin-bottom: 12.5px;
}
}
#webpage .layer .w_footer {
width: 100%;
height: 50px;
margin-top: 35px;
}
@media screen and (max-width: 560px) {
#webpage .layer .w_footer {
height: 25px;
margin-top: 17.5px;
}
}
#webpage #layer_4 {
margin-top: 0px;
z-index: 4;
animation-name: layer_4;
animation-duration: 10s;
animation-fill-mode: both;
animation-delay: 0s;
animation-timing-function: ease-in-out;
animation-direction: normal;
animation-iteration-count: infinite;
animation-play-state: running;
}
#webpage #layer_4 .w_header .w_nav {
width: 20%;
height: 25px;
display: block;
float: left;
margin: 0px 2.5%;
margin-top: 50px;
background: #ffee5a;
box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
#webpage #layer_4 .w_header .w_nav {
height: 12.5px;
margin-top: 25px;
}
}
#webpage #layer_4 .w_main .w_card .w_img {
width: 50%;
height: 25px;
margin: 10px;
background: #a882f6;
box-shadow: -10px 10px 20px 0px grey;
}
@media screen and (max-width: 560px) {
#webpage #layer_4 .w_main .w_card .w_img {
height: 12.5px;
margin: 5px;
}
}
#webpage #layer_4 .w_main .w_card .w_p {
width: 75%;
height: 10px;
background: #ffee5a;
margin-top: 5px;
}
@media screen and (max-width: 560px) {
#webpage #layer_4 .w_main .w_card .w_p {
height: 5px;
margin-top: 2.5px;
}
}
#webpage #layer_3 {
margin-top: 40px;
z-index: 3;
animation-name: layer_3;
animation-duration: 10s;
animation-fill-mode: both;
animation-delay: 0s;
animation-timing-function: ease-in-out;
animation-direction: normal;
animation-iteration-count: infinite;
animation-play-state: running;
}
#webpage #layer_3 .w_header .w_h1 {
width: 50%;
height: 25px;
background: #a882f6;
box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
#webpage #layer_3 .w_header .w_h1 {
height: 12.5px;
}
}
#webpage #layer_3 .w_header .w_nav {
width: 100%;
height: 25px;
display: block;
float: left;
margin-top: 25px;
background: white;
box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
#webpage #layer_3 .w_header .w_nav {
height: 12.5px;
margin-top: 12.5px;
}
}
#webpage #layer_3 .w_main .w_card {
background: white;
box-shadow: -10px 10px 20px 0px grey;
}
#webpage #layer_3 .w_footer .w_link {
width: calc(100% / 3);
height: 25px;
margin: 0 auto;
margin-top: 25px;
background: white;
box-shadow: -10px 10px 40px 0px grey;
}
@media screen and (max-width: 560px) {
#webpage #layer_3 .w_footer .w_link {
height: 12.5px;
margin-top: 12.5px;
}
}
#webpage #layer_2 {
margin-top: 80px;
z-index: 2;
animation-name: layer_2;
animation-duration: 10s;
animation-fill-mode: both;
animation-delay: 0s;
animation-timing-function: ease-in-out;
animation-direction: normal;
animation-iteration-count: infinite;
animation-play-state: running;
}
#webpage #layer_2 .w_header,
#webpage #layer_2 .w_main {
background: #F3F1F1;
box-shadow: -10px 10px 40px 0px grey;
}
#webpage #layer_2 .w_footer {
background: #a882f6;
box-shadow: -10px 10px 40px 0px grey;
}
#webpage #layer_1 {
margin-top: 120px;
background: white;
box-shadow: -10px 10px 40px 0px grey;
z-index: 1;
}
#sign {
position: absolute;
top: 50px;
left: 50px;
padding: 10px;
background: #a882f6;
font-family: sans-serif;
color: white;
}
#sign a {
color: white;
}
#sign a:hover {
color: #ffee5a;
}
</style>
</head>
<body>
<!-- Same code as on my website -->
<div id="webpage">
<div class="layer" id="layer_4">
<div class="w_header">
<div class="w_nav"></div>
<div class="w_nav"></div>
<div class="w_nav"></div>
<div class="w_nav"></div>
</div>
<div class="w_main">
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
<div class="w_card">
<div class="w_img"></div>
<div class="w_p"></div>
<div class="w_p"></div>
</div>
</div>
<div class="w_footer"></div>
</div>
<div class="layer" id="layer_3">
<div class="w_header">
<div class="w_h1"></div>
<div class="w_nav"></div>
</div>
<div class="w_main">
<div class="w_card"></div>
<div class="w_card"></div>
纯CSS3实现的3D分层模型演示动画效果源码.zip （1个子文件） 
132692077470496675 
index.html 8KB资源评论
易小侠
- 粉丝: 6624
- 资源: 9万+
