原文地址：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

扩展后地址：https://scrimba.com/c/cJkzMfd

HTML代码：

<html>

    <head>

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

    </head>

    <body>

        <div class="animation">唉，没有啥新想法添加。。。</div>

        <div class="box">

            <span data-text="B">B</span>

            <span data-text="U">U</span>

            <span data-text="T">T</span>

            <span data-text="T">T</span>

            <span data-text="O">O</span>

            <span data-text="N">N</span>

        </div>

        <script src="index.pack.js"></script>

        <script>

           /* alert("唉，没有啥新想法添加。。。"); */

        </script>

    </body>

</html>

css代码：

.animation{

   position: absolute;

   top:0px;

   /* 让字体位于窗口顶部右边外围 这里的数据是死的*/

   right: -210px;

   /*

        规定动画的名称

        规定动画的时长

        规定动画的次数

   */

   animation:mymove 10s infinite;

   animation-delay:0s;

    /*Safari and Chrome 兼容*/

    -webkit-animation:mymove 10s infinite;

    -webkit-animation-delay:0s;

}

@keyframes mymove{

    from {

        left:100%;

    }

    to {

        left:-200px;

    }

}

@-webkit-keyframes mymove /*Safari and Chrome*/{

    from {left:100%;}

    to {left:-200px;}

}

/* 按钮居中 */

html, body {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    /* 对于超出的内容隐藏 */

    overflow: hidden;

}

/* 设置按钮的尺寸和文字样式 */

.box {

    width: 200px;

    height: 60px;

    border: 2px solid black;

    text-align: center;

    font-size: 30px;

    line-height: 60px;

    font-family: sans-serif;

}

/* 按钮的每个字母都设置为行内块元素，以便单独设置动效 */

.box span {

    display: inline-block;

    color: blue;

}

/*把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：*/

.box span:nth-child(odd) {

    /* Y轴向上平移自身高度单位 */

    transform: translateY(-100%);

}

.box span:nth-child(even) {

    transform: translateY(100%);

}

/* 用伪元素为每个字母增加一个副本：*/

.box span::before {

    /* attr 的解说 http://www.runoob.com/cssref/pr-gen-content.html */

    content: attr(data-text);

    position: absolute;

    color: red;

}

/* 让伪元素的字母也交错显示，位置与其原始元素相对：*/

.box span:nth-child(odd)::before {

    transform: translateY(100%);

}

.box span:nth-child(even)::before {

    transform: translateY(-100%);

}

/* 为按钮增加鼠标划过样式，设置緩动时间，使其有动画效果：*/

.box:hover span {

    transform: translateY(0);

}

.box span {

    transition: 1s;

}

1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）的更多相关文章

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

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

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

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

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

  5. 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

  6. 7.纯 CSS 创作一个 3D 文字跑马灯特效

    原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <div class="box"& ...

  7. 如何用纯 CSS 创作一个荧光脉冲 loader 特效

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

  8. 前端每日实战：11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

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

  9. 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

随机推荐

  1. ZOJ2401 Zipper 双塔式 DP（双塔DP）

    第二次遇到双塔DP,再写一下. (flag是为了避免memset多次导致的时间浪费) #include<cstdio> #include<cstdlib> #include&l ...

  2. 关于FormData及其用法

    XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttp ...

  3. C#/.NET 使用 CommandLineParser 来标准化地解析命令行

    CommandLineParser 是一款用于解析命令行参数的 NuGet 包.你只需要关注你的业务,而命令行解析只需要极少量的配置代码. 本文将介绍如何使用 CommandLineParser 高效 ...

  4. CTF之常见的两种关于word的信息隐藏技术

    一.利用word本身自带的文字隐藏功能 1.在word中输入文字 2.选中文字,单击右键,选择字体选项 3.单击字体选项后,单击隐藏,确定 查找隐藏信息 1.单击左上角WPS文字后,选择选项按钮单击 ...

  5. 《DSP using MATLAB》Problem 4.17

  6. PipelineDB 1.0.0 发布——使用标准的pg 扩展开发模型

    PipelineDB 1.0.0 发布已经发布了,现在的已经成为一个标准的pg 扩展了,语法也有变动 create continous view 修改为了view,create streaem 修改为 ...

  7. C语言面试题3

    编程题 1.读文件file1.txt的内容(例如): 123456 输出到file2.txt: 563412 #include <stdio.h> #include <stdlib. ...

  8. idea新用法

    https://blog.csdn.net/linsongbin1/article/details/80211919

  9. mysql 中find_in_set()和in()用法比较

    mysql 中find_in_set()和in()用法比较 在mysql中in可以包括指定的数字,而find_in_set()用于特定的数据类型. find_in_set 函数使用方法 个例子来说:有 ...

  10. VS2010/MFC编程入门系列教程 (转)

    http://www.jizhuomi.com/school/  鸡啄米编程课堂 http://www.jizhuomi.com/software/257.html http://blog.csdn. ...