效果预览

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

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 创作阶梯文字特效的更多相关文章

  1. 前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效

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

  2. 前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果

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

  3. 前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面

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

  4. 如何用纯 CSS 创作阶梯文字特效

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

  5. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

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

  6. 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤

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

  7. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

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

  8. 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

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

  9. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

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

随机推荐

  1. IntelliJ IDEA 2018 2.X破解

    一 下载idea 官网 :https://www.jetbrains.com/idea/ 二 下载破解包 IntelliJ IDEA 2018.1.X--2.X(2.6可用,图就不改了) 链接: ht ...

  2. Island Transport 【HDU - 4280】【最大流Dinic】

    题目链接 可以说是真的把时间卡爆了,不断的修改了好多次之后才A了,一直T一直T,哭了…… 可以说是很练时间优化了,不断的改,不断的提交,最后竟然是改了Dinic中的BFS()中,我们一旦搜索到了T之后 ...

  3. Codeforces - 1194C - From S To T - 子序列 - 排序

    https://codeforces.com/contest/1194/problem/C 好像没什么好说的,要能构造s必须是t的子序列,并且相差的字符集合d是p的子集. 用双指针法求两遍子序列就可以 ...

  4. Springboot-技术专区-war包部署在Tomcat上并修改默认端口

    springboot项目内置Tomcat,直接打成jar包在dos下运行即可,但有时我们需要用war包以非内嵌Tomcat的方式来部署,以下是本人的实际经验 1.首先需要修改pom.xml文件 < ...

  5. css标签学习-vertical-align标签

    今天在学习查阅代码的时候,发现了一个不认识的CSS代码,于是进行学习. <html> <head> <style type="text/css"> ...

  6. ubuntu vim8.1编译安装

    sudo apt-get install libncurses5-dev python-dev python3-dev libgtk-3-dev libatk1.0-dev libbonoboui2- ...

  7. 2018-10-11-WPF-拖动滚动

    title author date CreateTime categories WPF 拖动滚动 lindexi 2018-10-11 14:10:41 +0800 2018-2-13 17:23:3 ...

  8. standard_key.kmp

    [KeyRemap]keyVersion=2B33554467=[eraseeof]S36=[bof]B33554466=[pagedn]S35=[eof]B33554465=[pageup]B10= ...

  9. Sass--混合宏--声明宏

    如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了.这 ...

  10. ltp-ddt smp_cpu_affinity

    # @name SMP CPU Affinity# @desc Check that processes assigned to multiple CPUs complete without erro ...