效果预览

在线演示

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

https://codepen.io/zhang-ou/pen/deVgRM

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cb6pkUE

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/014-three-languages-for-web-development

代码解读

定义 dom,一个容器中包含一个 span,span 内有文字:

<div class="book">
<span>HTML</span>
</div>

居中显示:

html, body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to top left, white, dimgray);
}

画出书的正面:

.book {
width: 12rem;
height: 18rem;
background: linear-gradient(navy, deeppink, tomato);
transform: skewY(-10deg);
}

画出书的侧面:

.book {
position: relative;
} .book::before {
content: '';
position: absolute;
width: 1.5rem;
height: 100%;
background: linear-gradient(navy, deeppink, tomato);
top: 0;
left: -1.5rem;
transform: skewY(45deg);
transform-origin: right;
filter: brightness(0.6);
}

画出书的顶面:

.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 {
box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.5);
}

设置文字样式:

.book span {
color: whitesmoke;
font-size: 2.2rem;
font-family: sans-serif;
display: block;
background: silver;
text-align: center;
height: 8rem;
margin-top: 5rem;
padding-top: 2rem;
box-sizing: border-box;
text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
position: absolute;
width: 100%;
}

画出文字侧面,与画图书侧面的方法相似:

.book span {
position: relative;
} .book span::before {
content: '';
position: absolute;
width: 1.5rem;
height: 100%;
background: silver;
top: 0;
left: -1.5rem;
transform-origin: right;
transform: skewY(45deg);
filter: brightness(0.6);
}

文字下增加一行小字号文字:

.book span::after {
content: 'development';
display: block;
font-size: 1rem;
}

dom 改为 3 本书,包含在一个容器之中,并且分别命名样式类:

<div class="books">
<div class="book html">
<span>HTML</span>
</div>
<div class="book css">
<span>CSS</span>
</div>
<div class="book js">
<span>JavaScript</span>
</div>
</div>

3 本书布局:


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

3 本书配色:

.book.html span,
.book.html span::before {
background: orange;
} .book.css span,
.book.css span::before {
background: yellowgreen;
} .book.js span,
.book.js span::before {
background: royalblue;
}

设置 3 本书的小字号文字:

.book.html span:after {
content: '<devolopment />';
} .book.css span::after {
content: '.devolopment::';
} .book.js span::after {
content: '{ devolopment }';
}

最后,为图书增加鼠标划过效果:

.book {
transition: 0.3s;
} .book:hover {
margin-top: -1.5rem;
}

大功告成!

知识点

原文地址:https://segmentfault.com/a/1190000014751037

如何用纯 CSS 创作一种侧立图书的特效的更多相关文章

  1. 前端每日实战:14# 视频演示如何用纯 CSS 创作一种侧立图书的特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交 ...

  2. 14.纯 CSS 创作一种侧立图书的特效

    原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...

  3. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  4. 如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...

  5. 如何用纯 CSS 创作一种按钮被瞄准的交互特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视 ...

  6. 前端每日实战:12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交 ...

  7. 前端每日实战:19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频 ...

  8. 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...

  9. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

随机推荐

  1. 一些CSS的备忘

    text-transform 文本转换 属性值是 none表示没有 不转换 同时也是默认的 capitalize 表示首字母大写 uppercase全部转换为大写 lowercase全部转为小写 te ...

  2. php分页例子实现读取mysql数据分页显示

    以下代码是PHP分页案例,测试通过,主要是PHP+mysql实现分页,代码来处百度空间,有兴趣看的话可以了解一下PHP是如何分页的? <?php $link = mysql_connect(&q ...

  3. Android课程设计第三天帧动画区间动画

    注意:课程设计只为完成任务,不做细节描述~ 点火是帧动画,发射是区间动画,于是 <?xml version="1.0" encoding="utf-8"? ...

  4. A Dangerous Maze LightOJ - 1027

    这题意真是... 题意:你在一个迷宫里,有一些门,每个门有一个参数x,如果为正表明你进入门后可以花x的时间出去,如果为负表明你进入门后可以花-x的时间回到出发的地方.每次回到出发的地方之后,不能记得之 ...

  5. Tomcat启动后打开页面提示404错误的解决

    Eclipse配置并启动Tomcat成功,但有时会访问localhost:8080出现404错误,此时需要修改Tomcat配置.步骤如下: 在Eclipse中双击Tomcat server,打开Tom ...

  6. Azure PowerShell 在ARM环境下使用指定 vhd(本地化后的磁盘) 来创建虚拟机

    #此脚本用于 Azure 存储账户中已有 vhd 镜像文件创建虚拟机,一般用于做好镜像测试 #----------------------------------------------------- ...

  7. android xml中使用include标签

    在一个项目中,我们可能会在xml中局部用到相同的布局,如果每次都在xml中重写这些布局,代码显得很冗余.重复的复制黏贴也很烦恼,所以,我们把这些相同的局部布局写成一个单独的xml模块,需要用到这些布局 ...

  8. 初识Vivado

    Vivado 设计套件包括高度集成的设计环境和新一代从系统到 IC 级的工具,这些均建立在共享的可扩展数据模型和通用调试环境基础上.这也是一个基于 AMBA AXI4 互联规范.IP-XACT IP ...

  9. win驱动安装记录

    工具:devcon64.exe 安装/更新/删除等记录:c:\windows\inf\setupapi.dev.log

  10. 字符串循环右移-c语言

    一个长度为len的字符串,对其循环右移n位 [期望]char str[] = "abcdefg";右移3次后,变成"efgabcd" [思路] 思路1. 如果用 ...