前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/MXYBEM
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cEQMJAK
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 1 个段落,段落中包含几个单词:
<div class="container">
<p>
<span>stay</span>
<span>hungry</span>
<span>stay</span>
<span>foolish</span>
</p>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
设置文字样式:
.container p {
color: white;
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.container p span {
display: block;
text-align: center;
}
修改 dom,把文本分成每相邻的 2 句为一组,4 句话一共分成 3 组:
<div class="container">
<p>
<span>stay</span>
<span>hungry</span>
</p>
<p>
<span>hungry</span>
<span>stay</span>
</p>
<p>
<span>stay</span>
<span>foolish</span>
</p>
</div>
把段落的行高改为 1 行文本高,3 个段落各占一行:
.container p {
margin: 0;
height: 1em;
overflow: hidden;
}
.container p span {
line-height: 1em;
}
让文字倾斜变形:
.container p:nth-child(odd) {
transform: skewY(-30deg) skewX(45deg) scaleY(1.3333);
}
.container p:nth-child(even) {
transform: skewY(-30deg) scaleY(1.3333);
}
对齐文字:
.container p:nth-child(2) {
margin-left: 1.3em;
}
.container p:nth-child(3) {
margin-left: 2.6em;
}
定义让文字上下移动的动画:
.container p span {
animation: lettering 3s infinite ease-in-out alternate;
}
@keyframes lettering {
to {
transform: translateY(-100%);
}
}
最后,让文字偏左一些,抵销因倾斜造成的位移:
.container p {
position: relative;
left: -0.8em;
}
大功告成!
前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效的更多相关文章
- 前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...
- 前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MGNWOm 可交互视频教程 此视频 ...
- 前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作阶梯文字特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- IntelliJ IDEA 2018 2.X破解
一 下载idea 官网 :https://www.jetbrains.com/idea/ 二 下载破解包 IntelliJ IDEA 2018.1.X--2.X(2.6可用,图就不改了) 链接: ht ...
- Island Transport 【HDU - 4280】【最大流Dinic】
题目链接 可以说是真的把时间卡爆了,不断的修改了好多次之后才A了,一直T一直T,哭了…… 可以说是很练时间优化了,不断的改,不断的提交,最后竟然是改了Dinic中的BFS()中,我们一旦搜索到了T之后 ...
- Codeforces - 1194C - From S To T - 子序列 - 排序
https://codeforces.com/contest/1194/problem/C 好像没什么好说的,要能构造s必须是t的子序列,并且相差的字符集合d是p的子集. 用双指针法求两遍子序列就可以 ...
- Springboot-技术专区-war包部署在Tomcat上并修改默认端口
springboot项目内置Tomcat,直接打成jar包在dos下运行即可,但有时我们需要用war包以非内嵌Tomcat的方式来部署,以下是本人的实际经验 1.首先需要修改pom.xml文件 < ...
- css标签学习-vertical-align标签
今天在学习查阅代码的时候,发现了一个不认识的CSS代码,于是进行学习. <html> <head> <style type="text/css"> ...
- ubuntu vim8.1编译安装
sudo apt-get install libncurses5-dev python-dev python3-dev libgtk-3-dev libatk1.0-dev libbonoboui2- ...
- 2018-10-11-WPF-拖动滚动
title author date CreateTime categories WPF 拖动滚动 lindexi 2018-10-11 14:10:41 +0800 2018-2-13 17:23:3 ...
- standard_key.kmp
[KeyRemap]keyVersion=2B33554467=[eraseeof]S36=[bof]B33554466=[pagedn]S35=[eof]B33554465=[pageup]B10= ...
- Sass--混合宏--声明宏
如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了.这 ...
- ltp-ddt smp_cpu_affinity
# @name SMP CPU Affinity# @desc Check that processes assigned to multiple CPUs complete without erro ...