原文地址：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. 大家一起做训练 第一场 G CD

    题目来源:UVA 624 题目的意思就是:我现在需要从 t 张CD中拿出一部分来,尽可能的凑出接近 N 这么久的音乐,但是不能超过 N. CD不超过20张,每张长度不超过 N ,不能重复选. 一个很简 ...

  2. Python3中 sys.argv的用法

    sys.avgr 是一个Python的引用模块.刚好做一个作业需要用到它,在sublime上编辑后运行,试图从结果发现它的用途,然而结果一直都是没结果. 后面在网上查了资料,才明白过来.sys.arg ...

  3. m mm等和envsetup.sh

    envsetup.sh简介: Android 完成编译的时候先执行 source build/envsetup.sh.在这个shell 脚本中定义了 help, croot, m, mm, mmm 等 ...

  4. docker 方式运行drill

    drill 1.14 版本已经官方支持使用docker 直接运行可,还是比较方便的,尽管镜像 有点大,但是实际测试使用还是比较方便的,实际上自己做一个也比较简单. 下载镜像 docker pull d ...

  5. vulcanjs 开源工具方便快速开发react graphql meteor 应用

    vulcan 开源工具方便快速开发react graphql meteor 应用 操作环境mac os 安装 meteor 安装(此安装有点慢,可以通过正确上网解决) curl https://ins ...

  6. 模板引擎之jade 学习

    jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码: doctype html html(lang="en&q ...

  7. JAVA中@SuppressWarnings注解的作用

    eclipse中开发JAVA代码时,经常会出现编译告警符号,影响代码可读性,也影响调试的断点符号正常显示,可以使用@SuppressWarnings注解来抑制这些告警符号的再现.1.抑制单个类型的告警 ...

  8. Spring核心思想：“控制反转”，也叫“依赖注入” 的理解

    @Service对应的是业务层Bean,例如: @Service("userService") public class UserServiceImpl implements Us ...

  9. Angular 4 子路由

    子子路由 现在要为产品组件增加两个子组件 1. 创建productDesc和sellerInfo两个组件 ng g component productDesc ng g component selle ...

  10. C# List的深复制（转）

    C# List的深复制 1.关于深拷贝和浅拷贝 C#支持两种类型:值类型和引用类型 值类型(Value Type):如 char, int, float,枚举类型和结构类型 引用类型(Referenc ...