前端每日实战:21# 视频演示如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 界面的更多相关文章
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 21纯 CSS 创作文本滑动特效的 UI 界面
原文地址:https://segmentfault.com/a/1190000014842868 简化版地址:https://scrimba.com/c/cgaZLh6 感想:笨蛋,想不出自己的东西. ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:32# 视频演示如何用纯 CSS 创作六边形按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...
- 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...
- 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- Codeforces 95C Volleyball(最短路)
题目链接:http://codeforces.com/problemset/problem/95/C C. Volleyball time limit per test 2 seconds memor ...
- Linux随笔 - vi/vim 编辑器显示行号
显示行号 1. 打开vi 编辑器 2. 输入 :set number 3. 回车 关闭行号显示 1. 打开vi 编辑器 2. 输入 :set nonumber 3. 回车 行号在每次打开 vi/v ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_07 Collections工具类_2_Collections集合工具类的方法
默认规则一般都是升序排序 再来创建一个字符串的数组 排序后,按照升序输出结果 自定义类型排序 创建一个Person类,getter和setter 有参构造和无参构造 重写toString的方法 传对象 ...
- AWK之随心所欲-基础篇
一.简介 awk 是一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及 生成报表等等. 在 Linux 系统下默认 awk 是 gawk,它是 awk 的 GNU 版本. ...
- Numpy 基础函数
日后用的着的时候再说,存下来.方便日后查看 NumPy数组使你可以将许多种数据处理任务表述为简洁的数组表达式(否则需要编写循环).用数组表达式代替循环的做法,通常被称为矢量化. 原来一直不明白什么叫矢 ...
- Pycharm中使用virtualenv创建虚拟环境
虚拟环境是Python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装的全局Python解释器. 虚拟环境非常有用,可以在系统的Python解释器中避免包的混乱和版本的冲突. ...
- SpringBoot整合Lintener
1.通过扫描完成Lintener组件的注册 1.1编写Listener /** * springboot整合Lintener 方式一 * 在web.xml中如何配置Listener * <lis ...
- 取消a或input标签聚焦后出现虚线框
1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...
- C#后台保存Cookie
一般是: Response.Cookies["backurl"].Expires.AddDays(2); 但是,IE浏览器保存Cookie用 Response.Cookies[&q ...
- 2019春第十一周作业Compile Summarize
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 这里 我在这个课程的目标是 能按自己的想法解出题目 这个作业在那个具体方面帮助我实现目标 能朝着软件工程师方向发展 参考文献与网址 C语言 ...