效果预览

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

https://codepen.io/comehope/pen/QrxxaW

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cgRgQHr

源代码下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/021-a-text-sliding-effect-ui

代码解读

定义 dom,容器中包含 question 和 answer:

<div>
<p>
<span class="question">Who gives you milk?</span>
<span class="answer">cow</span>
</p>
</div>

居中显示:

html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: darkcyan;
}

设置文本样式:

p {
width: 400px;
height: 2.5em;
color: gold;
font-size: 24px;
border: 2px solid gold;
line-height: 2.5em;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
letter-spacing: 2px;
word-spacing: 2px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

设置答案的样式:

p {
position: relative;
} p span {
position: absolute;
width: 100%;
top: 0;
left: 0;
} p .answer {
color: whitesmoke;
font-size: 1.1em;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.1);
}

增加问题与答案滑动切换的动画效果:

p {
overflow: hidden;
} p span {
transition: 0.5s ease-out;
} p .question {
left: 0;
} p:hover .question {
left: 100%;
} p .answer {
left: -100%;
} p:hover .answer {
left: 0;
}

dom 中再增加 2 个问题:

<div>
<p>
<span class="question">Who gives you milk?</span>
<span class="answer">cow</span>
</p>
<p>
<span class="question">Who likes to eat flies?</span>
<span class="answer">frog</span>
</p>
<p>
<span class="question">Who have large claws?</span>
<span class="answer">crab</span>
</p>
</div>

dom 中增加标题:

<div>
<h1>Who Am I</h1>
<p>
<span class="question">Who gives you milk?</span>
<span class="answer">cow</span>
</p>
<p>
<span class="question">Who likes to eat flies?</span>
<span class="answer">frog</span>
</p>
<p>
<span class="question">Who have large claws?</span>
<span class="answer">crab</span>
</p>
</div>

设置标题样式:

h1 {
font-family: sans-serif;
color: gold;
text-align: center;
}

最后,用伪元素增加大问号作为装饰背景:

h1 {
position: relative;
} h1::after {
content: '?';
position: absolute;
top: -0.35em;
left: 0;
font-size: 25em;
transform: rotate(15deg);
color: cyan;
filter: opacity(0.3);
text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}

知识点

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

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

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

  2. 21纯 CSS 创作文本滑动特效的 UI 界面

    原文地址:https://segmentfault.com/a/1190000014842868 简化版地址:https://scrimba.com/c/cgaZLh6 感想:笨蛋,想不出自己的东西. ...

  3. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

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

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

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

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

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

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

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

  7. 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白

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

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

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

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

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

随机推荐

  1. Codeforces 95C Volleyball(最短路)

    题目链接:http://codeforces.com/problemset/problem/95/C C. Volleyball time limit per test 2 seconds memor ...

  2. Linux随笔 - vi/vim 编辑器显示行号

    显示行号 1. 打开vi 编辑器 2. 输入  :set number 3. 回车 关闭行号显示 1. 打开vi 编辑器 2. 输入  :set nonumber 3. 回车 行号在每次打开 vi/v ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_07 Collections工具类_2_Collections集合工具类的方法

    默认规则一般都是升序排序 再来创建一个字符串的数组 排序后,按照升序输出结果 自定义类型排序 创建一个Person类,getter和setter 有参构造和无参构造 重写toString的方法 传对象 ...

  4. AWK之随心所欲-基础篇

    一.简介 awk 是一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及 生成报表等等. 在 Linux 系统下默认 awk 是 gawk,它是 awk 的 GNU 版本. ...

  5. Numpy 基础函数

    日后用的着的时候再说,存下来.方便日后查看 NumPy数组使你可以将许多种数据处理任务表述为简洁的数组表达式(否则需要编写循环).用数组表达式代替循环的做法,通常被称为矢量化. 原来一直不明白什么叫矢 ...

  6. Pycharm中使用virtualenv创建虚拟环境

    虚拟环境是Python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装的全局Python解释器. 虚拟环境非常有用,可以在系统的Python解释器中避免包的混乱和版本的冲突. ...

  7. SpringBoot整合Lintener

    1.通过扫描完成Lintener组件的注册 1.1编写Listener /** * springboot整合Lintener 方式一 * 在web.xml中如何配置Listener * <lis ...

  8. 取消a或input标签聚焦后出现虚线框

    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...

  9. C#后台保存Cookie

    一般是: Response.Cookies["backurl"].Expires.AddDays(2); 但是,IE浏览器保存Cookie用 Response.Cookies[&q ...

  10. 2019春第十一周作业Compile Summarize

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 这里 我在这个课程的目标是 能按自己的想法解出题目 这个作业在那个具体方面帮助我实现目标 能朝着软件工程师方向发展 参考文献与网址 C语言 ...