原文地址：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. （2）bytes类型

    bytes类型就是字节类型 把8个二进制一组称为一个byte,用16进制来表示 Python2里面字符串其实更应该称为字节串,但是python2里面有一个类型是butes,所以在Python2里面by ...

  2. 实习第一周第一天：接口 extends是继承类，implement是实现接口，原接口里面的方法填充，方法名也是不变，重写override是父类的方法名不变，把方法体给改了

    一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...

  3. Linux设备树

    一.设备树编译 1.编译设备树:cd linux-x.xx & make dtbs,生成的dtb在目录linux-x.xx/arch/xxx/boot/dts下 2.反编译dtb,生成dts: ...

  4. solr 6.2.1环境搭建

    一:Solr简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  5. ASP.NET MVC Area 的使用

    MVC提供Area机制,在同一个项目之内就能够切割出不同的ASP.NET MVC网站. 插入:首先在相同的位置,比如说同一个文件夹(如:Controllers)是不能创建俩个相同名称的文件(如:Hom ...

  6. PHP中开启gzip压缩的2种方法

    网页开启gzip压缩以后,其体积可以减小20%~90%,可以节省下大量的带宽,从而减少页面响应时间,提高用户体验. php配置改法: 复制代码代码如下: zlib.output_compression ...

  7. maven 指定 jdk 版本

    方法1:直接修改 本地  settings.xml 文件 <profiles>  </profiles> 之间加入 下面的 <profile> <id> ...

  8. FineUI4.0以后如何调用JS事件

    F.ready(function() { // 你的代码 }); F.ready(function () {            var searchClientID = '<%= TextB ...

  9. Java awt组件间的继承关系

    Container的继承关系: Window是可独立存在的容器,其他则不行.

  10. 【jmeter】jmeter聚合报告之90%Line参数说明

    其实要说明这个参数的含义非常简单,可能你早就知道他的含义,但我对这个参数一直有误解,而且还一直以为是“真理”,原于一次面试,被问到了这个问题,所以引起我这个参数的重新认识. 先说说我错误的认识: 我一 ...