簡單前端頁面設計(JS CSS) 魔方變換

2021-10-03 23:32:09 字數 1773 閱讀 2946

*問題描述:想要實現乙個3d魔方,魔方不停的在旋轉,且魔方每個面都由9個部分組成,每個部分也有一定的動畫效果

具體的要求請參見mooc北京林業大學(web前端開發課程)

*html**+js**

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

魔方測試<

/title>

"text/css" rel=

"stylesheet" href=

"webstyle.css"

>

<

/head>

"container"

>

="mfbox"

>

="box-sheet top"

>

<

/div>

="box-sheet bottom"

>

<

/div>

="box-sheet left"

>

<

/div>

="box-sheet right"

>

<

/div>

="box-sheet font"

>

<

/div>

="box-sheet behind"

>

<

/div>

<

/div>

<

/div>

var lists=document.

queryselectorall

(".box-sheet");

for(let index =

0;index< lists.length;index++)}

}<

/script>

<

/body>

<

/html>

*css**(使用了animation,動畫自定義的)

*

#container

.mfbox

@keyframes self-rotate

100%

}.box-sheet

.box-sheet div:nth-

child(1

).box-sheet div:nth-

child(2

).box-sheet div:nth-

child(3

).box-sheet div:nth-

child(4

).box-sheet div:nth-

child(5

).box-sheet div:nth-

child(6

).box-sheet div:nth-

child(7

).box-sheet div:nth-

child(8

).box-sheet div:nth-

child(9

)@keyframes boxmove20%

80%100%

}.top

.bottom

.left

.right

.font

.behind

python前端查詢頁面 前端頁面設計

基本框架搭建好了後,我們就要開始豐富頁面內容了。最起碼,得有乙個使用者登入的表單不是麼?註冊的事情我們先放一邊。一 使用原生html頁面 刪除原來的login.html檔案中的內容,寫入下面的 登入 使用者名稱 密碼 簡單解釋一下 form標籤主要確定目的地url和傳送方法 p標籤將各個輸入框分行 ...

Python學習 簡單頁面設計

西宮硝子 以聲之形,塑花之形,以你之名,刻於我心 關於人設 相關作品 影視鏈結 西宮硝子 2020年5月14日 西宮硝子,日本漫畫 聲之形 及其衍生作品女主角,聽力障礙的少女,因長期聽覺障礙而難以發出聲音,受到班上同學的孤立和欺負。硝子出生時期就身患疾病,3歲的時候才被發覺有聽力障礙,也因此成為了單...

前端頁面響應式布局 簡單實現

找到了個 寫的就是這個響應式布局的 複製貼上到css 檔案 就能實現等比例縮放功能 下面是 裡面的範例之一 當瀏覽器的可視區域小於980px media screen and max width 980px content sidebar footer 當瀏覽器的可視區域小於650px media ...