主页中融合了魔方的三种形态展示:
1、普通旋转(代码参考来源:https://www.icourse163.org/spoc/learn/HNKJ-1450726207?tid=1451210449#/learn/content?type=detail&id=1218740982&cid=1226885074)
2、魔方小块飞出后停留一段时间后再飞回(代码参考来源:https://blog.csdn.net/z564359805/article/details/88356547)
3、魔方内部进行交替变形(代码参考来源:https://blog.csdn.net/z564359805/article/details/88356547)
网站地址:
魔方及网页背景用到的图片
(图片名a0,a1,a2,a3,a4,a5,a6的下标1-6在魔方中有用)
img目录下:
img2目录:
img3目录:
网页背景音乐:
加入一首世界级电音Summertime(钢琴版):
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ZTY的个人主页</title>
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="YellowStar - K-391-Summertime钢琴版(YellowStar Bootleg)(YellowStar remix).flac">
你的浏览器版本太低,不支持audio标签
</audio>
<style>
.paragraph
{
background-color: darkblue;
background-image:url(img/java.jpg);
}
h1
{
text-align: center;
color:purple;
font-size: 50px;
}
table{
border:1
align="center"
cellpadding="10"
width="800"
}
/*以下为旋转魔方的样式*/
/*三个魔方都共用的正方体框体*/
.top{
transform: translateZ(150px);
}
.bottom{
transform:translateZ(-150px) rotateX(180deg);
}
.before{
transform:translateY(150px) rotateX(-90deg);
}
.left{
transform:translateX(-150px) rotateY(-90deg);
}
.right{
transform:translateX(150px) rotateY(90deg);
}
.after{
transform:translateY(-150px) rotateX(90deg);
}
/*右边的魔方*/
.container{
width: 300px;
height: 300px;
position: absolute;
left: 950px;
top: 400px;
perspective: 200000px;
}
.box{
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: ro 4s linear infinite;
}
.box-page{
width: 300px;
height: 300px;
position: absolute;
}
@keyframes ro2{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
/*左下方的魔方*/
.container2{
width:300px;
height:300px;
position: absolute;
left: 100px;
top: 1000px;
perspective:20000px;
}
.box2{
width:300px;
height:300px;
border:1px solid transparent;
box-sizing: border-box;
position:relative;
transform-style:preserve-3d;
animation: rotate 10s linear infinite;
}
@keyframes rotate{
100%{
transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
}
}
.box-page2{
width: 300px;
height: 300px;
position:absolute;
box-sizing: border-box;
transform-style:preserve-3d;
}
.box-page2 div:first-child,.box-page2 div:nth-child(3),.box-page2 div:nth-child(5),.box-page2 div:nth-child(7),.box-page2 div:nth-child(9){
transform: rotateY(0deg);
animation: rotatey 6s linear infinite;
}
@keyframes rotatey{
20%{
transform: rotateY(0deg);
background-size: 300px 300px;
}
40%{
transform: rotateY(540deg);
background-size: 100px 100px;
}
60%{
transform: rotateY(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateY(0deg);
background-size:300px 300px;
}
}
.box-page2 div:nth-child(2),.box-page2 div:nth-child(4),.box-page2 div:nth-child(6),.box-page2 div:nth-child(8){
transform:rotateX(0deg);
animation: rotatex 6s linear infinite;
}
@keyframes rotatex{
20%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
40%{
transform: rotateX(540deg);
background-size: 100px 100px;
}
60%{
transform: rotateX(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
}
/*第三个右下方的魔方*/
.container3{
width: 300px;
height: 300px;
position: absolute;
left: 950px;
top: 1000px;
perspective: 20000px;
}
.box3{
width: 300px;
height: 300px;
/*控制子元素保持3D效果*/
transform-style: preserve-3d;
/*设置盒子旋转-测试代码*/
/*transform: rotateX(45deg) rotateY(45deg);*/
/*让魔方动起来*/
animation: ro 10s linear infinite;
/*animation-direction规定是否应该轮流反向播放动画*/
animation-direction: alternate;
}
/*设置动画*/
@keyframes ro{
0%{
transform: rotateX(45deg) rotateY(45deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.box-page3{
width: 300px;
height: 300px;
/*初始化位置*/
position: absolute;
/*设置3d效果*/
transform-style: preserve-3d;
}
.box-page3 div:nth-child(1){
animation: a1 4.5s ease-in;
}
.box-page3 div:nth-child(2){
animation: a1 4.5s ease-in 0.5s;
}
.box-page3 div:nth-child(3){
animation: a1 4.5s ease-in 1s;
}
.box-page3 div:nth-child(4){
animation: a1 4.5s ease-in 1.5s;
}
.box-page3 div:nth-child(5){
animation: a1 4.5s ease-in 2s infinite;
}
.box-page3 div:nth-child(6){
animation: a1 4.5s ease-in 2.5s;
}
.box-page3 div:nth-child(7){
animation: a1 4.5s ease-in 3s;
}
.box-page3 div:nth-child(8){
animation: a1 4.5s ease-in 3.5s;
}
.box-page3 div:nth-child(9){
animation: a1 4.5s ease-in 4s;
}
/*每个小面的九个图片的动画*/
@keyframes a1{
/*不动*/
0%{
/*scale缩放比例*/
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
/*飞出去,飞没了*/
20%{
/*scale缩放比例,边飞边旋转*/
transform: translateZ(90px) scale(0.5) rotateZ(180deg);
}
50%{
transform: translateZ(180px) scale(0) rotateZ(360deg);
}
/*飞回来*/
80%{
transform: translateZ(300px) scale(0.5) rotateZ(720deg);
}
100%{
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
}
</style>
</head>
<body class="paragraph">
<div>
<h1>ZTYのHome Page</h1>
</div>
<div class="top-header">
<p>如果你想更进一步了解我的技术栈的话,可以看看我的博客</p>
<ul>
<li><a href="https://blog.csdn.net/Zhongtongyi">CSDN博客:溪流背坡村er</a></li>
<li>QQ:1119094861</li>
</ul>
</div>
<table>
<tr>
<th colspan="7" style="background-color: yellowgreen;" >个人简介</th>
</tr>
<tr>
<th style="background-color: aqua;">姓名:</th><td style="background-color: blue;""> 钟统一</td>
<th style="background-color:blueviolet;">年龄:</th><td style="background-color:brown;">19</td>
<th style="background-color:cadetblue;">民族:</th><td style="background-color:darkgreen;">汉</td>
</tr>
<tr>
<th style="background-color:darkorange;">出生年:</th><td style="background-color:deeppink;">2000</td>
<th style="background-color:gold;">政治面貌:</th><td style=background-color:yellow;">团员</td>
<th style="background-color:yellowgreen;">学历:</th><td style="background-color:teal;">本科</td>
</tr>
<tr>
<th style="background-color:slateblue;">专业:</th><td style="background-color:sandybrown;">计算机科学与技术</td>
<th style="background-color: red;">高中:</th><td><a href="http://www.nanyaedu.com/" style="background-color: wheat;">长沙市南雅中学</a></td>
<th style="background-color:red;">现就读学校:</th><td style="background-color:darkblue;">湖南科技大学</td>
</tr>
<tr>
<th style="background-color:orangered;">爱好:</th><td style="background-color:violet;">敲代码,看书,跑步等</td>
<th style="background-color:tomato;">籍贯:</th><td style="background-color: skyblue;">益阳</td>
<th style="background-color:peru;">邮箱:</th><td colspan="2" style="background-color: purple;" >zty1119094861@sina.com</td>
</tr>
<tr>
<th height="160" style="background-color:saddlebrown;">个人特长:</th>
<td colspan="6" style="background-color:yellow;"><p>篮球,羽毛球,游泳</p></td>
</tr>
<tr>
<th height="160" style="background-color:yellow;"> 非一般的大中小学:</th>
<td colspan="6" style="background-color:violet;">
<p>说起我的经历,可以说是一波三折的,为什么这么说呢?小学在广东,初中在湖南岳阳</p>
<p>然后高中考到长沙市南雅中学,大学又在离我高中才30多公里的湘潭</p>
<p>讲真高中大学的夏天都是非常热的,为啥?因为湘潭长沙就是一体的,长沙不是四大火炉之一嘛</p>
</tr>
<tr>
<th height="160" style="background-color: slateblue;">总结:</th>
<td colspan="6" style="background-color: peru;">
<p>兴趣不多,不追剧不看小说不刷微博不逛B站(保守型),但是我热爱运动:足球篮球乒乓球羽毛球都有涉及</p>
</tr>
</table>
<!--第一个最右边的魔方-->
<div class="container">
<div class="box">
<div class="box-page top"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>
</div>
</div>
</body>
<!--第二个左下方的魔方-->
<div class="container2">
<div class="box2">
<div class="top box-page2"></div>
<div class="bottom box-page2"></div>
<div class="left box-page2"></div>
<div class="right box-page2"></div>
<div class="before box-page2"></div>
<div class="after box-page2"></div>
</div>
</div>
<!--第三个右下方的魔方-->
<div class="container3">
<div class="box3">
<div class="box-page3 top animation"></div>
<div class="box-page3 bottom"></div>
<div class="box-page3 left"></div>
<div class="box-page3 right"></div>
<div class="box-page3 before"></div>
<div class="box-page3 after"></div>
</div>
</div>
<script type="text/javascript">
//第一个最右边的魔方
var arr=document.querySelectorAll(".box-page");
for(var n=0;n<arr.length;n++){
//外层循环遍历行
for(var r=0;r<3;r++){
//内层循环遍历列
for(var c=0;c<3;c++){
var divs=document.createElement("div");
divs.style.cssText="width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/a"+n+".jpg);background-size:300px 300px;";
arr[n].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX=-c*100+"px";
divs.style.backgroundPositionY=-r*100+"px";
}
}
}
//第二个左下方的魔方
var arr = document.querySelectorAll(".box2>div");
for(var n = 0;n<arr.length;n++){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
var divs = document.createElement("div");
divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img3/a"+n+".jpg);background-size: 300px 300px;";
arr[n].appendChild(divs);
// 改变每一个div的位置
divs.style.left = 100*j+"px";
divs.style.top = 100*i+"px";
// 改变背景图相应的位置
divs.style.backgroundPositionX = -j*100+"px";
divs.style.backgroundPositionY = -i*100+"px";
}
}
}
//第三个右下方的魔方
var arr = document.querySelectorAll(".box-page3");
// 遍历六个面
for (var n = 0; n < arr.length; n++){
// 外循环控制行
for (var r = 0; r < 3; r++) {
// 内循环控制列
for (var c = 0; c < 3; c++) {
// 创建元素
var divs = document.createElement("div")
divs.style.cssText = "width: 100px;height: 100px;border: 2px solid #fff;box-sizing: border-box;position: absolute;background-image: url(img2/a"+n+".jpg);background-size:300px 300px;";
arr[n].appendChild(divs);
divs.style.left = c*100+"px";
divs.style.top = r*100+"px";
// 背景图像定位
divs.style.backgroundPositionX = -c*100+"px";
divs.style.backgroundPositionY = -r*100+"px";
}
}
}
</script>
</body>
</html>