如何用纯 CSS 创作一种侧立图书的特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/deVgRM
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
代码解读
定义 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;
}
大功告成!
知识点
- justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- skewY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
- skewX() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
- transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
- brightness() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness
原文地址:https://segmentfault.com/a/1190000014751037
如何用纯 CSS 创作一种侧立图书的特效的更多相关文章
- 前端每日实战:14# 视频演示如何用纯 CSS 创作一种侧立图书的特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交 ...
- 14.纯 CSS 创作一种侧立图书的特效
原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作一种文字断开的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视 ...
- 前端每日实战:12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交 ...
- 前端每日实战:19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...
随机推荐
- 基于 CODING 轻松搞定持续集成
点击观看视频教程 带你一步一步搞定 CODING 持续集成 持续集成加速软件交付 持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...
- 如果没有intelliJ 编译器?
刚刚是了一晚上的用记事本来写代码,脱离编译器,发现自己完全废了. 写了好多个类,在命令行编译失败,上网查错误,说编码问题, 编码问题解决后,命令行还是编译失败,粘贴到编译器 发现完全是自己代码能力太弱 ...
- Spring自动扫描注解类的冲突问题
原文地址:http://www.blogjava.net/crazycy/archive/2014/07/12/415738.html Spring MVC项目中通常会有二个配置文件,spring-s ...
- 写一个类继承socket时遇到的问题(TCP)
主要为题出在服务器端的accept()函数,他返回两个参数,一个套接字和一个客户端的ip和端口组成的元组. 问题就出在这个套接字这里,我们继承了socket这个类,这个套接字创建的时候是通过socke ...
- Iahub and Xors Codeforces - 341D
二维线段树被卡M+T...于是去学二维树状数组区间更新区间查询 树状数组维护数列区间xor的修改.删除(就是把原问题改成一维): 以下p*i实际都指i个p相xor,即(i&1)*pa表示原数列 ...
- 线段树+离散化 POJ 2528 Mayor's posters
题目传送门 题意:在一面墙上贴海报,有先后顺序,问最后有多少张不同的海报(指的是没被覆盖或者只是部分覆盖的海报) 分析:这题数据范围很大,直接搞超时+超内存,需要离散化:离散化简单的来说就是只取我们需 ...
- Reference for shell scripting
${var} 和 $var的区别 http://stackoverflow.com/questions/8748831/when-do-we-need-curly-braces-in-variable ...
- php的iconv函数中utf8与utf-8的差异
开发中遇到一个奇怪的问题:报错如下: iconv() [<a href='function.iconv'>function.iconv</a>] : Wrong charset ...
- spring boot druid mybatis多数据源
一.关闭数据源自动配置(很关键) @SpringBootApplication(exclude = { DataSourceAutoConfiguration.class }) 如果不关闭会报异常:o ...
- 责任链模式和php实现
职责链模式(又叫责任链模式): 包含了一些命令对象和一些处理对象,每个处理对象决定它能处理那些命令对象,它也知道应该把自己不能处理的命令对象交下一个处理对象,该模式还描述了往该链添加新的处理对象的方法 ...