原文地址：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. Ntfs 下的链接符号创建

    熟悉过 Unix/Linux 都应该知道,Unix/Linux 用 ln 建立硬链接,ln -s 建立软链接(符号链接). 硬链接和符号链接的区别 Ntfs下的也有链接符: 内置命令:mklink   ...

  2. 黄聪：HBuilder复制PHP项目后，【转到定位】功能失效

    1.[工具]--[插件安装]--[Aptana php插件]--[选择]--[安装] 2.随便开几个文件,操作一下[编辑]--[整理代码格式]就可以了

  3. Selenium Python FirefoxWebDriver处理打开保存对话框

    代码如下(网上示例): #profile =  webdriver.FirefoxProfile(r"C:\Users\Skyyj\AppData\Roaming\Mozilla\Firef ...

  4. 解决MSDE安装回滚的问题

    rem 解决MSDE安装回滚的问题.bat rem 设置为手动rem sc config "LanmanServer" start= DEMAND rem 设置为自动sc conf ...

  5. Python3 读、写Excel文件

    首先,简单介绍一下EXECL中工作簿和工作表的区别: 工作簿的英文是BOOK(WORKBOOK),工作表的英文是SHEET(WORKSHEET). 一个工作簿就是一个独立的文件 一个工作簿里面可以有1 ...

  6. bzoj4183: tree

    Description 自底向上模拟,原地操作以节省空间 #include<bits/stdc++.h> unsigned n,a,b,c,v[],mx,ans=; int main(){ ...

  7. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  8. 客户端负载均衡Feign之三：Feign补充

    在spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Ap ...

  9. 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  10. 【转】Java工程师必备书单

    江湖路险,你我同行. Java开发工程师一般负责后端开发,当然也有专门做Java Web的工程师,但是随着前后端的分离,越来越多的Java工程师需要往大后端方向发展. 今天我们就来介绍一下Java后端 ...