原文地址：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. jquery中not的用法[.not(selector)]

    描述: 从匹配的元素集合中移除指定的元素. 如果提供的jQuery对象代表了一组DOM元素,.not()方法构建一个新的匹配元素的jQuery对象,用于存放筛选后的元素.所提供的选择器是对每个元素进行 ...

  2. adnanh webhook 框架 hook rule

    adnanh webhook 支持一系列的逻辑操作 AND 所有的条件都必须匹配 { "and": [ { "match": { "type" ...

  3. 基于server broker 的数据实时更新

    Service Broker介绍:SQL Server Service Broker 为消息和队列应用程序提供 SQL Server 数据库引擎本机支持.这使开发人员可以轻松地创建使用数据库引擎组件在 ...

  4. GridView 相同单元格合并

    效果如下: 主要代码如下:public class GridDecorator { public static void MergeRows(GridView gridView) { for (int ...

  5. Google Android API官网封杀了，没法查android技术资料的3种解决方式

    1.从uhdesk上訪问简化版android api在线文档(反应速度极快) http://www.uhdesk.com/simpleandroidoc/index.html   2.下载chm本地文 ...

  6. C#常用插件和工具

    Code generation(代码自动生成) NVelocity CodeSmith X-Code .NET XGoF - NMatrix / DEVerest Compilation(编译工具) ...

  7. 使用VBS控制声音

    Set Ws = CreateObject("Wscript.Shell") Ws.Sendkeys "…" '静音 'Ws.Sendkeys "爱爱 ...

  8. java 方向术语

    缩写 英文 中文意思 POJO Plain Ordinary Java Object 简单的Java对象 slf4j Simple Logging Facade for Java 简单日志门面,跟 C ...

  9. Angular 4 重定向路由

    重定向路由: 用户访问一个指定的地址时,将其重新向到另一个指定的地址 (接前面的一节) 配置如下: 之前http://localhost:4200 会进入主页,现在将主页导航改为home,http:/ ...

  10. BaseAction编写：免去一些重复的代码，比如继承ActionSupport和实现ModelDriven接口

    1.BaseAction package com.learning.crm.base; import java.lang.reflect.ParameterizedType; import java. ...