效果预览

在线演示

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

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;
}

大功告成!

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

如何用纯 CSS 创作阶梯文字特效的更多相关文章

  1. 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效

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

  2. 38.纯 CSS 创作阶梯文字特效

    原文地址:https://segmentfault.com/a/1190000015107942 HTML code: <div class="container"> ...

  3. 如何用纯 CSS 创作文本滑动特效的 UI 界面

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

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

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

  5. 如何用纯 CSS 创作牛奶文字变换效果

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

  6. 如何用纯 CSS 创作六边形按钮特效

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

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

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

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

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

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

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

随机推荐

  1. JAVA团队开发手册 - 3. 开发流程

    开发流程 对于一个项目,最大的问题就是如何拆解为任务,分配到合适的人手里,并在有限的时间内完成它. 就像做建筑工程一样,其实做IT也是可以量化的,可能有的人砌砖砌得慢一些,有的人快一些. 但是我们把整 ...

  2. C# 面向对象之面向接口

    接口的定义 与类不同的是接口用interface关键字 (1)接口中所有成员不能添加任何修饰符,默认为public,如果显示指定修饰符将会出现编译错误; (2)接口中不能包含字段.运算符重载.实例构造 ...

  3. Codeforces 1139E(二分图最大匹配)

    pi只有0-5000且只找最小的没出现的,又要找不同club的,考虑二分匹配,左边pi,右边ci,一个匹配一个.离线倒着加边即可. const int maxn = 5e3 + 5; int m, n ...

  4. 1-28Map简介

    Map接口概述 除了Collection之外,常用的集合还有Map接口,里面常用的实现类图如下: map中的元素是以键-值的方式存在的,通过键可以获取到值,键是不可以重复的,跟地图比较像,通过一个坐标 ...

  5. Storm编程入门API系列之Storm的Topology多个Workers数目控制实现

    前期博客 Storm编程入门API系列之Storm的Topology默认Workers.默认executors和默认tasks数目 继续编写 StormTopologyMoreWorker.java ...

  6. JS中函数与事件

    一.函数: 1.函数就是一个工具,通过一小段代码,完成某个功能: 2.函数的定义: function 函数名(){ ..... } 或者 : var 函数名 = function(){ ...... ...

  7. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  8. body和普通div背景图宽高百分比的区别

    body和普通div背景图的区别  background: url(//m.360buyimg.com/mobilecms/s220x220_jfs/t2746/167/831241799/29915 ...

  9. VC和MATLAB混合开发需要注意的一个问题

    作者:朱金灿 来源:http://blog.csdn.net/clever101 如果你的操作系统是64位操作系统,那么直接运行MATLAB的安装文件下的Setup.exe会默认安装的是64位的MAT ...

  10. spark性能测试理论-Benchmark(转)

    一.Benchmark简介Benchmark是一个评价方式,在整个计算机领域有着长期的应用.正如维基百科上的解释“As computer architecture advanced, it becam ...