原文地址：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. sqlalchemy操作----外键关联，relationship

    ... #!_*_coding:utf-8_*_ #__author__:"Alex huang" import sqlalchemy from sqlalchemy import ...

  2. XE5开发Android程序调用电话相关功能(短信息和电话)

    方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: uses Androidapi.JNI.JavaTypes,Androidapi.JNI.Telepho ...

  3. QQ在开发中的应用

    1 截图 2 快捷回复 1svn更新 2美术资源替换 3后端服务器模块确认 4开会吧 5策划更新

  4. HTTP/HLS/RTMP超级负载测试工具

    这个负载测试工具是网游分享的工具,可以在http://blog.csdn.net/win_lin/article/details/11835011 或者https://github.com/winli ...

  5. PAT 乙级 1036 跟奥巴马一起编程(15) C++版

    1036. 跟奥巴马一起编程(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 美国总统奥巴马不仅呼吁所有人 ...

  6. ElasticSearch 5.0.0 安装部署常见错误或问题

    1.ERROR: bootstrap checks failed [1]: max file descriptors [65535] for elasticsearch process is too ...

  7. 服务容错保护断路器Hystrix之六：服务熔断和服务降级

    伴随着微服务架构被宣传得如火如荼,一些概念也被推到了我们面前(管你接受不接受),其实大多数概念以前就有,但很少被提的这么频繁(现在好像不提及都不好意思交流了).想起有人总结的一句话,微服务架构的特点就 ...

  8. Java NIO系列教程（十一） Pipe

    Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示: 创建管道 通过Pi ...

  9. 每天一点点oracle

    每天一点点oracle sqlplus / as sysdba [oracle@oracle ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.3.0 ...

  10. HDOJ 2001 ASCII码排序

    #include<set> #include<iostream> using namespace std; int main() { char a, b, c; while ( ...