大一網頁設計，嘗試更多炫酷頁面內容，狠狠加分！！！！
話不多說，直接上代碼
這是HTML部分:
[圖片鏈接為原神官網圖片，請聯系作者洗掉]
<body>
<!-- 先構建需要主體框架 -->
<div class="book">
<!-- 第一頁
注意這里用的圖片路徑為鏈接式
若更換本地圖片需新建img檔案夾引入
-->
<div class="book_nav_1" style="--i:2;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20220102/2022010212060483653.jpg);background-size:100%;"></div>
<!-- 第二頁 -->
<div class="book_nav_2" style="--i:4;--s:1;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211231/2021123112015523211.jpg);"></div>
<!-- 第三頁 -->
<div class="book_nav_3" style="--i:3;--s:2;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211230/2021123012063011892.jpg);"></div>
<!-- 第四頁 -->
<div class="book_nav_4" style="--i:2;--s:3;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211226/2021122621332859489.png);"></div>
<!-- 第五頁 -->
<div class="book_nav_5" style="--i:1;--s:4;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20220102/2022010212060483653.jpg);"></div>
</div>
</body>接下來設計CSS部分：
<style>
/* 設定彈性布局，用來為盒狀模型提供最大的靈活性 */
body{
display: flex;
}
.book{
width: 640px;
height: 420px;
position: absolute;
top: 150px;
transform-style: preserve-3d;
perspective: 1000px;
transition: 1s;
left: 650px;
}
.book_nav_1,.book_nav_2,.book_nav_3,.book_nav_4,.book_nav_5{
/* 設定寬高 */
width: 640px;
height: 400px;
/* 生成絕對定位元素 */
position: absolute;
/* 這是翻頁的起點，在左邊 */
transform-origin: left;
/* 把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉， */
background-size: cover;
/* 這是翻頁時元素之間的延遲 */
transition: calc(var(--i)*.3s);
/* 這是翻頁時元素的層級 */
z-index: calc(var(--i)*99);
}
.book_nav_1,.book_nav_2{
/* 設定邊距 */
border: solid 20px #576574;
/* 設定左邊框 */
border-left: none;
/* 設定距離頂部高度 */
top: -20px;
/* 設定圓角邊框 */
border-radius: 0 20px 20px 0;
}
.book:hover .book_nav_1{
border-left: #576574 20px solid;
}
.book:hover .book_nav_2,.book:hover .book_nav_3,.book:hover .book_nav_4,.book:hover .book_nav_5{
/* css調轉180度實作頁面翻動后效果 */
transform: rotateY(-180deg);
/* 翻頁延遲和層級*/
transition: calc(var(--s)*.4s);
z-index: calc(var(--s)*-99);
}
.book:hover{
/* 平移 */
transform: translateX(100px);
}
</style>完整代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>曾某--智慧腦瓜</title>
<style>
/* 設定彈性布局，用來為盒狀模型提供最大的靈活性 */
body{
display: flex;
}
.book{
width: 640px;
height: 420px;
position: absolute;
top: 150px;
transform-style: preserve-3d;
perspective: 1000px;
transition: 1s;
left: 650px;
}
.book_nav_1,.book_nav_2,.book_nav_3,.book_nav_4,.book_nav_5{
/* 設定寬高 */
width: 640px;
height: 400px;
/* 生成絕對定位元素 */
position: absolute;
/* 這是翻頁的起點，在左邊 */
transform-origin: left;
/* 把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉， */
background-size: cover;
/* 這是翻頁時元素之間的延遲 */
transition: calc(var(--i)*.6s);
/* 這是翻頁時元素的層級 */
z-index: calc(var(--i)*99);
}
.book_nav_1,.book_nav_2{
/* 設定邊距 */
border: solid 23px gray;
/* 設定左邊框 */
border-left: none;
/* 設定距離頂部高度 */
top: -20px;
/* 設定圓角邊框 */
border-radius: 0 20px 20px 0;
}
.book:hover .book_nav_1{
border-left: #576574 20px solid;
}
.book:hover .book_nav_2,.book:hover .book_nav_3,.book:hover .book_nav_4,.book:hover .book_nav_5{
/* css調轉180度實作頁面翻動后效果 */
transform: rotateY(-180deg);
/* 翻頁延遲和層級*/
transition: calc(var(--s)*.6s);
z-index: calc(var(--s)*-99);
}
.book:hover{
/* 平移 */
transform: translateX(100px);
}
</style>
</head>
<body>
<!-- 先構建需要主體框架 -->
<div class="book">
<!-- 第一頁
注意這里用的圖片路徑為鏈接式
若更換本地圖片需新建img檔案夾引入
-->
<div class="book_nav_1" style="--i:2;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20220102/2022010212060483653.jpg);background-size:100%;"></div>
<!-- 第二頁 -->
<div class="book_nav_2" style="--i:4;--s:1;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211231/2021123112015523211.jpg);"></div>
<!-- 第三頁 -->
<div class="book_nav_3" style="--i:3;--s:2;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211230/2021123012063011892.jpg);"></div>
<!-- 第四頁 -->
<div class="book_nav_4" style="--i:2;--s:3;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20211226/2021122621332859489.png);"></div>
<!-- 第五頁 -->
<div class="book_nav_5" style="--i:1;--s:1;background-image:url(https://uploadstatic.mihoyo.com/contentweb/20220102/2022010212060483653.jpg);"></div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/403990.html
標籤：其他