<!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>
body {
background: #7cf;
}
.container {
display: flex;
justify-content: center;
align-items: flex-end;
width: 336px;
height: 672px;
margin: 25px auto;
transform-style: preserve-3d;
perspective: 800px;
}
.path {
background: #888;
position: absolute;
width: 48px;
height: 64px;
transform: translate(144px, 272px);
}
.floor {
background: #885;
position: absolute;
width: 176px;
height: 192px;
transform: translate(80px, 80px);
}
.surface {
background-color: #070;
background-image: repeating-linear-gradient(transparent, transparent 15px, rgba(0, 0, 0, 0.2) 15px, rgba(0, 0, 0, 0.2) 16px), repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(0, 0, 0, 0.2) 15px, rgba(0, 0, 0, 0.2) 16px);
width: 336px;
height: 336px;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(45deg);
transition: all 3s linear;
}
.surface:hover {
transform: rotateX(60deg) rotateZ(8deg);
}
.block {
transform-style: preserve-3d;
}
.block-inner {
position: relative;
width: 16px;
transform-style: preserve-3d;
transform: rotateX(-90deg) translateZ(16px);
}
.block-inner div {
position: absolute;
width: 16px;
height: 16px;
}
.block-inner div:hover {
background: rgba(255, 255, 255, 0.7);
}
.back {
transform: translateZ(-16px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(16px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-16px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(0);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(0);
transform-origin: bottom center;
}
.front {
transform: translateZ(0);
}
.b1 {
transform: translateX(128px) translateY(256px) translateZ(16px);
}
.b1 .block-inner div {
background: #722;
}
.b1 .block-inner div.top {
background: #883333;
}
.b1 .block-inner div.left,
.b1 .block-inner div.right {
background: #661111;
}
.b2 {
transform: translateX(112px) translateY(256px) translateZ(16px);
}
.b2 .block-inner div {
background: #eee;
}
.b2 .block-inner div.top {
background: white;
}
.b2 .block-inner div.left,
.b2 .block-inner div.right {
background: #dddddd;
}
.b3 {
transform: translateX(96px) translateY(256px) translateZ(16px);
}
.b3 .block-inner div {
background: #eee;
}
.b3 .block-inner div.top {
background: white;
}
.b3 .block-inner div.left,
.b3 .block-inner div.right {
background: #dddddd;
}
.b4 {
transform: translateX(80px) translateY(256px) translateZ(16px);
}
.b4 .block-inner div {
background: #eee;
}
.b4 .block-inner div.top {
background: white;
}
.b4 .block-inner div.left,
.b4 .block-inner div.right {
background: #dddddd;
}
.b5 {
transform: translateX(64px) translateY(256px) translateZ(16px);
}
.b5 .block-inner div {
background: #722;
}
.b5 .block-inner div.top {
background: #883333;
}
.b5 .block-inner div.left,
.b5 .block-inner div.right {
background: #661111;
}
/* .b6
* @include place($white, 5, 16, 1)
* .b7
* @include place($white, 5, 15, 1)
* .b8
* @include place($white, 5, 14, 1)
* .b9
* @include place($red, 5, 13, 1)
* .b10
* @include place($white, 5, 12, 1)
* .b11
* @include place($white, 5, 11, 1)
* .b12
* @include place($white, 5, 10, 1)
* .b13
* @include place($red, 5, 9, 1)
* .b14
* @include place($white, 5, 8, 1)
* .b15
* @include place($white, 5, 7, 1)
* .b16
* @include place($white, 5, 6, 1)
* .b17
* @include place($red, 5, 5, 1)
* .b18
* @include place($white, 6, 5, 1)
* .b19
* @include place($white, 7, 5, 1)
* .b20
* @include place($white, 8, 5, 1)
* .b21
* @include place($red, 9, 5, 1)
* .b22
* @include place($white, 10, 5, 1)
* .b23
* @include place($white, 11, 5, 1)
* .b24
* @include place($white, 12, 5, 1)
* .b25
* @include place($red, 13, 5, 1)
* .b26
* @include place($white, 14, 5, 1)
* .b27
* @include place($white, 15, 5, 1)
* .b28
* @include place($white, 16, 5, 1) */
.b29 {
transform: translateX(256px) translateY(64px) translateZ(16px);
}
.b29 .block-inner div {
background: #722;
}
.b29 .block-inner div.top {
background: #883333;
}
.b29 .block-inner div.left,
.b29 .block-inner div.right {
background: #661111;
}
.b30 {
transform: translateX(256px) translateY(80px) translateZ(16px);
}
.b30 .block-inner div {
background: #eee;
}
.b30 .block-inner div.top {
background: white;
}
.b30 .block-inner div.left,
.b30 .block-inner div.right {
background: #dddddd;
}
.b31 {
transform: translateX(256px) translateY(96px) translateZ(16px);
}
.b31 .block-inner div {
background: #eee;
}
.b31 .block-inner div.top {
background: white;
}
.b31 .block-inner div.left,
.b31 .block-inner div.right {
background: #dddddd;
}
.b32 {
transform: translateX(256px) translateY(112px) translateZ(16px);
}
.b32 .block-inner div {
background: #eee;
}
.b32 .block-inner div.top {
background: white;
}
.b32 .block-inner div.left,
.b32 .block-inner div.right {
background: #dddddd;
}
.b33 {
transform: translateX(256px) translateY(128px) translateZ(16px);
}
.b33 .block-inner div {
background: #722;
}
.b33 .block-inner div.top {
background: #883333;
}
.b33 .block-inner div.left,
.b33 .block-inner div.right {
background: #661111;
}
.b34 {
transform: translateX(256px) translateY(144px) translateZ(16px);
}
.b34 .block-inner div {
background: #eee;
}
.b34 .block-inner div.top {
background: white;
}
.b34 .block-inner div.left,
.b34 .block-inner div.right {
background: #dddddd;
}
.b35 {
transform: translateX(256px) translateY(160px) translateZ(16px);
}
.b35 .block-inner div {
background: #eee;
}
.b35 .block-inner div.top {
background: white;
}
.b35 .block-inner div.left,
.b35 .block-inner div.right {
background: #dddddd;
}
.b36 {
transform: translateX(256px) translateY(176px) translateZ(16px);
}
.b36 .block-inner div {
background: #eee;
}
.b36 .block-inner div.top {
background: white;
}
.b36 .block-inner div.left,
.b36 .block-inner div.right {
background: #dddddd;
}
.b37 {
transform: translateX(256px) translateY(192px) translateZ(16px);
}
.b37 .block-inner div {
background: #722;
}
.b37 .block-inner div.top {
background: #883333;
}
.b37 .block-inner div.left,
.b37 .block-inner div.right {
background: #661111;
}
.b38 {
transform: translateX(256px) translateY(208px) translateZ(16px);
}
.b38 .block-inner div {
background: #eee;
}
.b38 .block-inner div.top {
background: white;
}
.b38 .block-inner div.left,
.b38 .block-inner div.right {
background: #dddddd;
}
.b39 {
transform: translateX(256px) translateY(224px) translateZ(16px);
}
.b39 .block-inner div {
background: #eee;
}
.b39 .block-inner div.top {
background: white;
}
.b39 .block-inner div.left,
.b39 .block-inner div.right {
background: #dddddd;
}
.b40 {
transform: translateX(256px) translateY(240px) translateZ(16px);
}
.b40 .block-inner div {
background: #eee;
}
.b40 .block-inner div.top {
background: white;
}
.b40 .block-inner div.left,
.b40 .block-inner div.right {
background: #dddddd;
}
.b41 {
tr
纯CSS3实现中国风格的寺庙庙宇动画效果源码.zip
版权申诉
28 浏览量
2022-11-09
22:10:55
上传
评论
收藏 20KB ZIP 举报
纯CSS3实现中国风格的寺庙庙宇动画效果源码.zip （1个子文件） 
132689834480568955 
index.html 414KB资源评论
毕业_设计
- 粉丝: 1947
- 资源: 1万+
最新资源
- python-leetcode面试题解之第421题数组中两个数的最大异或值.zip
- python-leetcode面试题解之第416题分割等和子集.zip
- python-leetcode面试题解之第414题第三大的数.zip
- python-leetcode面试题解之第412题Fizz-Buzz.zip
- python-leetcode面试题解之第409题最长回文串.zip
- python-leetcode面试题解之第408题有效单词缩写.zip
- python-leetcode面试题解之第405题数字转换为十六进制数.zip
- python-leetcode面试题解之第404题左叶子之和.zip
- python-leetcode面试题解之第401题二进制手表.zip
- python-leetcode面试题解之第400题第N位数字.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
