效果预览

在线演示

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

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

知识点

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

如何用纯 CSS 创作文本滑动特效的 UI 界面的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 如何用纯 CSS 创作一个按钮文字滑动特效

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

  9. 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

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

随机推荐

  1. Codeforces732E Sockets

    首先检测有木有和Computer匹配的Socket,如果有则将其匹配. 然后将所有没有匹配的Socket连上Adapter,再去检测有木有Computer与Socket匹配. 重复这个操作31次,所有 ...

  2. 编译boost asio http/server 方法

    这段时间学习boost 的asio 编程,想编译asio自带的http/server的程序,无奈在网上根本找不到方法,只能自己摸索学习. 登陆boost asio 的example 目录,(我 boo ...

  3. 初探Hibernate3源码--读取配置文件

    依照个人推测,要实现ORM框架,关键是如何拼凑sql语句再通过jdbc来进行对数据库的访问,另外将数据库返回的数据记录封装成对应的类也是必不可少的. 那么实现ORM框架的基本思路如下: 1,读取xml ...

  4. Java图解

    java虚拟机 JVM运行过程: java开发工具包 java入门图解1 java入门图解2 java入门图解3 java入门图解4

  5. dos 下 批量替换 只支持txt

    首先必须存成 bat 格式,其次识别不了word 1.bat ##替换12 成12*3 @echo offsetlocal enabledelayedexpansionfor /F "tok ...

  6. Android屏幕适配-安卓切图

    一.Android中的单位 1.dp(dip):density-independent pixels,这并不是一个绝对的单位,而只是一个相对的概念,代表的是屏幕写对角线上每inch上像素点的个数. 2 ...

  7. 【译】建立属于你的个人高效系统——效率专家 Mike Vardy 教你如何设置一个简单的个人高效系统

    原文:http://mux.baidu.com/?p=5300 百度MUX 已经有太多的高效系统供人使用,而对于那些刚刚开始,想寻求更好方法完成他们任务,项目,目标的人来说,要做一个高效系统却是相当艰 ...

  8. 动手实现 React-redux(五):Provider

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: ... class Index extend ...

  9. JAVA 运用流编程实现简单的"记事本"功能

    一.概要 1.功能介绍 2.实现的思路及步骤代码 3.完整代码 二.功能 运用IO流和Swing实现简单的记事本功能(打开.保存.退出) 三.思路及实现步骤 1.在构造函数中画出操作界面 //创建jt ...

  10. AJPFX关于java的依赖 关联 聚合的关系解释

    依赖:  两个相对独立的系统,当一个系统要构筑另一个系统的实例,或者依赖另一的服务时,这两个就是依赖关系.比如自行车和打气筒之间就是依赖关系.代码表现形式如下:    public class A{  ...