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

简化版地址：https://scrimba.com/c/cgaZLh6

感想：笨蛋，想不出自己的东西。。。

HTML代码：

<!DOCTYPE HTML>

<html>

    <head>

        <link rel="stylesheet" href="index.css">

    </head>

    <body>

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

    </body>

</html>

CSS代码：

html, body {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: green;

    color: gold;

    text-align: center;

}

p {

    width: 400px;

    height: 2.5em;

    font-size: 24px;

    border: 2px solid gold;

    line-height: 2.5em;

    border-radius: 10px;

    font-family: sans-serif;

    letter-spacing: 2px;

    word-spacing: 2px;

    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);

    position: relative;

    /* 溢出隐藏 */

    overflow: hidden;

}

p span {

    /* 绝对定位,使两个span重合 */

     position: absolute;

    /* 占父元素全部 */

    width: 100%;

    top:;

    left:;

    /* 使之有动画效果 */

    transition: 0.5s ease-out;

}

p .question,

p:hover .answer {

    left:;

}

p:hover .question {

    left: 100%;

}

p .answer {

    color: whitesmoke;

    font-size: 1.1em;

    text-transform: uppercase;

    background: rgba(0, 0, 0, 0.1);

    left: -100%;

}

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

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

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

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

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

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

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

  4. 32.纯 CSS 创作六边形按钮特效

    原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Tribon/AM 数据库名字的含义

    收集在这里备用 数据库名 Tribon环境变量 内容描述 船体型线数据库 SB_CGDB 船体外型信息 型表面,船体曲线,板缝 船体结构数据库 SB_OGDB 船体模型信息 板材数据库 SB_PLDB ...

  2. IO流中File文件最常用和直接的用法

    一.File (一)概述 1.File: 1)文件和目录(文件夹)路径名的抽象表示形式 2)注意: 可以表示文件夹与文件,即路径与文件 抽象概念,即路径与文件是否存在不确定   2.构造方法 1)Fi ...

  3. linux 系统下有sda和hda的硬件设备分别代表什么意思

    linux 系统下有sda和hda的硬件设备分别代表什么意思/dev/sda1 # SCSI设备,sda,sdb,sdc,三块盘,1,2,3代表分区(PV)/dev/sda2/dev/sdb1/dev ...

  4. 经常开发出现bug的同事，

    各位,再强调一点,以后如果遇到bug的地方,是自己开发的内容,我希望自己去看下调整下,而不是等再此被提出,等到领导再次提出问题,或者多次出现问题会影响自己的评级 现在是我再这里说,以后再其他地方工作, ...

  5. LeetCode——18. 4Sum

    一.题目链接:https://leetcode.com/problems/4sum/ 二.题目大意: 给定一个数组A和一个目标值target,要求从数组A中找出4个数来使之构成一个4元祖,使得这四个数 ...

  6. C++标准模板库（STL）介绍：set的基本用法

    1.元素的方向遍历 使用反向迭代器reverse_iterator可以反向遍历集合,输出集合元素的反向排序结果.它需要用到rbegin()和rend()两个方法,它们分别给出了反向遍历的开始位置和结束 ...

  7. python列表中的值转换为字符串，及列表里的所有值拼接成一个字符串 的方法

    后记: ls3='%'.join(ls2) 会把%加入拼接成的字符里面,同理,加入其它字符也一样,''空就是什么都不加,如上图 最后输出 1%我%22

  8. 关于requests的session方法保持不了cookie的问题。(seesion的意思是保持一个会话，比如 登陆后继续操作(记录身份信息) 而requests是单次请求的请求，身份信息不会被记录)

    最近在做爬虫的时候遇到了一个问题,在用requests的session方法保持cookie的时候发现requests不能保持手动构建的cookie.起初以为requests只能自动保持由服务器返回的s ...

  9. 计时器setInterval()

    在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互时间:周期性执行或调用表达式之间的 ...

  10. 在HP-UX 11.11用swinstall安装gcc 4.2.3

    agent60 在linux上执行不了,原因是操作系统内核版本不一致,需要重新编译包. file $SHELL 显示  PA-RISC1.1 在HP-UX 11.31 PA-RISC1.1 版本中 编 ...