主頁中融合了魔方的三種形態展示：
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;" >[email protected]</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>