介绍

这次是我第二次写博客，如果有什么错误，敬请指教。

班级相册

因为这次的页面比较简单，我就只介绍班级相册就好了。班级相册也是我最花费精力的地方。
第一页面
这是效果页面一
这是效果页面二

这张代码是从B站上抄的，为什么呢？当然是要有酷炫效果啦！

这是HTML代码

                            <div class="whole"><a href="正式相册.html"><!--/*外层最大容器*/--><div class="wrap"><!--   /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="../image/1.jpg"  class="pic"/></div><!--后面图片 --><div class="out_back"><img src="../image/2.jpg"  class="pic"/></div><!--左图片 --><div class="out_left"><img src="../image/3.jpg"  class="pic"/></div><div class="out_right"><img src="../image/4.jpg"  class="pic"/></div><div class="out_top"><img src="../image/5.jpg"  class="pic"/></div><div class="out_bottom"><img src="../image/6.jpg"  class="pic"/></div><!--小正方体 --> <span class="in_front"><img src="../image/壁纸6.jpg" class="in_pic" /></span><span class="in_back"><img src="../image/壁纸5.jpg" class="in_pic" /></span><span class="in_left"><img src="../image/壁纸4.jpg" class="in_pic" /></span><span class="in_right"><img src="../image/壁纸3.jpg" class="in_pic" /></span><span class="in_top"><img src="../image/壁纸2.jpg" class="in_pic" /></span><span class="in_bottom"><img src="../image/壁纸1.jpg" class="in_pic" /></span></div></div></a></div>

这是css代码

html{background: #fff;height: 100%;  background:url(../image/背景.jpg) no-repeat;background-size:100%
}
/*最外层容器样式*/
.wrap{position: relative;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 200px;margin: auto;/*改变左右上下,图片方块移动*/}
/*包裹所有容器样式*/
.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 200px;height: 200px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 100px;height: 100px;
}
.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}

代码解析：
我发现transform是一个如果要做3D的很重要的属性。
transform可以实现div或者图片的平移和旋转，按照x，y，z轴的数值角度来实现。rotate表示旋转，用六个div组成一个正方体。而position: absolute;让它们与背景与互相互不干扰。

.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}

-webkit-animation:是一个复合属性，必须结合@-webkit-keyframes一起使用。
animation-timing-function: linear;是匀速的意思。
transform-style: preserve-3d;子元素将保留其 3D 位置。
剩下的对我来说就这些比较简单，旋转的角度可以一个一个地尝试。
其他的网页也比较普通没什么好写的。谢谢观看。

HTML班级网站实例（笔记2）相关推荐

关于C/C++读写64位内存的实例笔记
关于C/C++读写64位内存的实例笔记前言 1.引入库 2.定义变量 3.实际读写操作最后前言 ReadProcessMemory和WriteProcessMemory这两个函数几乎是所有跨进程 ...
jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
vue.js创建网站实例1
搭建项目环境网上的教程很多,随便搜一个,参考: https://blog.csdn.net/weixin_43844158/article/details/89788002 1)下载并安装node. ...
软件工程-团队项目-班级网站软件需求规格说明书
目录一. 引言... 2 1.1 定位与目标... 2 1.2 对象... 2 1.3 软件需求分析理论... 2 1.4 软件需求分析目标... 3 二. 需求概述... 4 2.1 项目背景.. ...
基恩士PLC③--配方实例笔记
基恩士PLC③--配方实例笔记一般工作站有时候都会要求兼容多个产品,所以需要写多个配方以方便切换,这次说说基恩士PLC配方怎么写 1. 配方切换以及上下限如下图,02跟03程序段是按下递加或递减程 ...
vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录第 ...
node.js创建网站实例3
node.js访问mysql数据库并把查询结果返回给前端 1.cmd中运行:npm install mysql -s 2.修改api.js的代码 // 1.先引入express模块,express是一 ...
scrapy+招聘网站爬虫笔记
scrapy+招聘网站爬虫笔记先看看要爬的网站:https://sou.zhaopin.com/?jl=719&kw=%E8%8D%AF%E7%89%A9 目的:获取每个城市的时间.区域.城 ...
网站搭建笔记精简版---廖雪峰WebApp实战-Day1:搭建开发环境笔记
网站搭建笔记精简版-廖雪峰教程学习@[三川水祭] 仅作学习交流使用,将来的你会感谢现在拼命努力的自己!!! 目录 win7安装配置git github赋予本机权限新建github项目本地搭建网页框 ...
栈溢出实例--笔记三（ret2libc）
栈溢出实例--笔记三(ret2libc) 1.栈溢出含义及栈结构 2.ret2libc基本思路 3.实战 3.1.二进制程序如下 3.2.查看栈结构 3.3.第一次栈溢出 3.4.第二次栈溢出 1.栈 ...

HTML班级网站实例（笔记2）

班级网站笔记（二）

介绍

班级相册

HTML班级网站实例（笔记2）相关推荐

最新文章

热门文章