手把手教你实现三本前端书籍

一条会coding的Shark
0 阅读3分钟

前言

这次趁着周末休息的时间，弄了一个新的动画效果，用CSS实现了三本书，分别是HTML、CSS和JS三本书，也算是回忆过去的学习经历了。整个实现过程比较简单，大家可以先看到下面的效果预览部分，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。

效果预览

最终实现的相关效果如下。

HTML部分

首先我们看到HTML部分，相关代码如下。

<div class="books">
<div class="book html">
<p>HTML<span>&lt;devolopment /&gt;</span></p>
</div>
<div class="book css">
<p>CSS<span>.devolopment::</span></p>
</div>
<div class="book js">
<p>JavaScript<span>{ devolopment }</span></p>
</div>
</div>

这里创建了一个包含三本书的书籍展示区，每本书代表一种前端开发技术。当与相应的CSS结合后，这段HTML会呈现出三本倾斜的3D书本效果，每本书有独特的颜色标识（通常HTML橙色、CSS蓝色、JS黄色），以及鼠标悬停时有上浮动画效果。这种设计巧妙地展示了前端开发的三种核心技术。

CSS部分

首先我们看到类名books的样式，相关代码如下。

.books {
	display: flex;
	width: calc(12rem * 3 + 3rem * 2);
	justify-content: space-between;
	margin-top: 6rem;
}

这里定义了一个名为.books的容器样式，用于包含多个书本元素。将元素设置为Flex容器，使其子元素（书本）按照Flexbox规则布局，默认情况下，子元素会水平排列在一行中。

通过以上的方式实现了一个水平排列的书本容器，书本之间有3rem的间距，容器总宽度为42rem，书本在容器内均匀分布，首尾书本贴边。

这种布局方式确保了书本在不同屏幕尺寸下保持正确的相对位置和间距。

然后我们看到类名为book的样式，相关代码如下。

.book {
	width: 12rem;
	height: 18rem;
	background: linear-gradient(navy, deeppink, tomato);
	transform: skewY(-10deg);
	box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.5);
	position: relative;
	transition: 0.3s;
}
.book:hover {
	margin-top: -1.5rem;
}

这里针对上面的样式继续优化书本的特点，加入鲜艳的渐变背景，设置倾斜的3D效果以及逼真的阴影，最后通过一个平滑的悬停动画（鼠标放上去时书上浮）来结束。

这种设计让静态的书本元素具有交互性和动态感，增强了用户体验。

最后我们看到剩下的样式，相关代码如下。

.book::before {
	background: linear-gradient(navy, deeppink, tomato);
}
.book::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1.5rem;
	background: white;
	top: -1.5rem;
	left: 0;
	transform-origin: bottom;
	transform: skewX(45deg);
	filter: brightness(0.9);
}
.book p {
	position: absolute;
	width: inherit;
	height: 8rem;
	top: 3rem;
	box-sizing: border-box;
	padding-top: 2rem;
	color: whitesmoke;
	font-size: 2.2rem;
	font-family: sans-serif;
	text-align: center;
	text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
}

这里使用伪元素和文本样式来增强书本的3D效果和内容展示。::before 伪元素创建书本的左侧厚度效果，使用与书本相同的渐变背景，保持视觉一致性。

::after 伪元素 创建书本的顶部厚度效果，模拟书脊，使其脱离文档流，相对于书本定位，通过transform: skewX(45deg)沿X轴倾斜45度，形成斜面效果，最后通过filter: brightness(0.9) 稍微降低亮度，模拟阴影效果。

综上所述这里通过伪元素和文本样式增强了书本的3D效果，::before 创建左侧厚度，::after 创建顶部厚度，完成3D立体效果，文本样式确保书本内容清晰可读且视觉吸引人，这些样式共同创建了逼真的3D书本效果。

总结

以上就是整个效果的实现过程了，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

avatar
文章
阅读
粉丝