原文地址：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. BZOJ4767: 两双手【组合数学+容斥原理】

    Description 老W是个棋艺高超的棋手,他最喜欢的棋子是马,更具体地,他更加喜欢马所行走的方式.老W下棋时觉得无聊,便决定加强马所行走的方式,更具体地,他有两双手,其中一双手能让马从(u,v) ...

  2. bind() 函数兼容

    为了搞清这个陌生又熟悉的bind,google一下,发现javascript1.8.5版本中原生实现了此方法,目前IE9+,ff4+,chrome7+支持此方法,opera和safari不支持(MDN ...

  3. UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等）

    UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...

  4. hdu 5285 二分图黑白染色

    题意:给出 n 个人,以及 m 对互不认识的关系,剩余的人都互相认识,要将所有人分成两组,组内不能有互不认识的人,要求每组至少有一人,并且第一组人数尽量多,问两组人数或不可能时单独输出 BC 48 场 ...

  5. HDU5373 The shortest problem （YY）

    http://acm.hdu.edu.cn/showproblem.php?pid=5373 YY题,模拟下计算过程就好了,计算中并不要保存实际数(这个数会非常大),只要保存到目前为止的数字位上的和 ...

  6. sublime 自动添加兼容前缀插件autoprefixer

    安装插件autoprefixer步骤: 1.确保Node.js已经安装,未安装请 点击 这里>> 2.下载autoprefixer插件 https://github.com/sindres ...

  7. C条件编译

    #include <stdio.h> void main() { #ifdef AAA printf("find AAA defined\n"); #else prin ...

  8. 充电 IC 对 0V 电池充电问题

    只讨论锂聚合物电池,由于设置漏电流原因,有些锂电池会放电到 0V(正常是不应该的). 但是在时候就是会发电到 0V,这里就要考虑充电 IC 是否有对 0V 电池充电的功能,还有保护 IC 是否允许 0 ...

  9. 处理json的常用java类库：Json-lib(org.json)、Gson、Jackson、Fastjson

    更多的处理json的java类库,有人做了性能对比,GitHub地址:https://github.com/fabienrenaud/java-json-benchmark 处理json的java类库 ...

  10. Vuejs项目的Webpack2构建优化

    最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...