纯HTML CSS设计翻页效果

2023-08-30 02:05| 来源: 网络整理| 查看: 265

大一网页设计，尝试更多炫酷页面内容，狠狠加分！！！！

话不多说，直接上代码

这是HTML部分:

[图片链接为原神官网图片，请联系作者删除]

接下来设计CSS部分：

/* 设置弹性布局，用来为盒状模型提供最大的灵活性 */ 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); }

完整代码展示

曾某--智慧脑瓜 /* 设置弹性布局，用来为盒状模型提供最大的灵活性 */ 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); }

【本文地址】

公司简介

联系我们