原文地址：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. GetPostBackEventReference加RaisePostBackEvent实现自定义控件中回调传参

    ; //回调函数,回调参数值:eventArgument        public void RaisePostBackEvent(string eventArgument)        {    ...

  2. [Android] Surface、SurfaceHolder与SurfaceView

    其实相当于MVC结构的三者关系:M(Surface).V(SurfaceView).C(SurfaceHolder) 1.Surface Handle onto a raw buffer that i ...

  3. 禁止光盘优盘自动播放（Shell Hardware Detection服务）

    strComputer = "."Set objWMIService = GetObject("winmgmts:\\" & strComputer & ...

  4. 【剑指offer】逆序输出链表

    输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. *考察栈的使用 *使用循环输出Stack中内容的时候,不能使用for(int i; i<stack.size();i++)因为s ...

  5. Socket调用Close后如何终止套接口的问题

    setsockopt 设置 SO_LINGER 选项 此选项指定函数close对面向连接的协议如何操作(如TCP).内核缺省close操作是立即返回,如果有数据残留在套接口缓冲区中则系统将试着将这些数 ...

  6. Espresso 开源了

    Google Testing Blog上发布了一篇博客,Espresso 开源了 http://googletesting.blogspot.com/2013/10/espresso-for-andr ...

  7. [UE4]子弹穿透多个机器人

    一.将机器人的碰撞类型改成“OverLap” 二.使用“MultiLineTraceByChannel”这个是可以穿透检测,可以检测到多个物体(前提是被检测物体的碰撞类型是“OverLap”).“Li ...

  8. VI使用手册（常见命令）

    VI使用手册 模式切换 i键开始进入编辑模式,Esc进入一般模式,保存退出:wq,不保存退出q,强制退出q! 如何定位到行文档首位,行首位? gg或者1G命令将光标移动到文档开头G命令将光标移动到文档 ...

  9. RAC集群安装校验输出信息

    RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...

  10. 移动端动态font-size

    /** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, ...