效果预览

在线演示

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

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. 基于 CODING 轻松搞定持续集成

    点击观看视频教程 带你一步一步搞定 CODING 持续集成 持续集成加速软件交付 持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...

  2. 如果没有intelliJ 编译器?

    刚刚是了一晚上的用记事本来写代码,脱离编译器,发现自己完全废了. 写了好多个类,在命令行编译失败,上网查错误,说编码问题, 编码问题解决后,命令行还是编译失败,粘贴到编译器 发现完全是自己代码能力太弱 ...

  3. Spring自动扫描注解类的冲突问题

    原文地址:http://www.blogjava.net/crazycy/archive/2014/07/12/415738.html Spring MVC项目中通常会有二个配置文件,spring-s ...

  4. 写一个类继承socket时遇到的问题(TCP)

    主要为题出在服务器端的accept()函数,他返回两个参数,一个套接字和一个客户端的ip和端口组成的元组. 问题就出在这个套接字这里,我们继承了socket这个类,这个套接字创建的时候是通过socke ...

  5. Iahub and Xors Codeforces - 341D

    二维线段树被卡M+T...于是去学二维树状数组区间更新区间查询 树状数组维护数列区间xor的修改.删除(就是把原问题改成一维): 以下p*i实际都指i个p相xor,即(i&1)*pa表示原数列 ...

  6. 线段树+离散化 POJ 2528 Mayor's posters

    题目传送门 题意:在一面墙上贴海报,有先后顺序,问最后有多少张不同的海报(指的是没被覆盖或者只是部分覆盖的海报) 分析:这题数据范围很大,直接搞超时+超内存,需要离散化:离散化简单的来说就是只取我们需 ...

  7. Reference for shell scripting

    ${var} 和 $var的区别 http://stackoverflow.com/questions/8748831/when-do-we-need-curly-braces-in-variable ...

  8. php的iconv函数中utf8与utf-8的差异

    开发中遇到一个奇怪的问题:报错如下: iconv() [<a href='function.iconv'>function.iconv</a>] : Wrong charset ...

  9. spring boot druid mybatis多数据源

    一.关闭数据源自动配置(很关键) @SpringBootApplication(exclude = { DataSourceAutoConfiguration.class }) 如果不关闭会报异常:o ...

  10. 责任链模式和php实现

    职责链模式(又叫责任链模式): 包含了一些命令对象和一些处理对象,每个处理对象决定它能处理那些命令对象,它也知道应该把自己不能处理的命令对象交下一个处理对象,该模式还描述了往该链添加新的处理对象的方法 ...