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

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

HTML代码：

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="index.css">
  4.     </head>
  5.     <body>
  6.         <div class="animation">唉，没有啥新想法添加。。。</div>
  7.         <div class="box">
  8.             <span data-text="B">B</span>
  9.             <span data-text="U">U</span>
  10.             <span data-text="T">T</span>
  11.             <span data-text="T">T</span>
  12.             <span data-text="O">O</span>
  13.             <span data-text="N">N</span>
  14.         </div>
  15.         <script src="index.pack.js"></script>
  16.         <script>
  17.            /* alert("唉，没有啥新想法添加。。。"); */
  18.         </script>
  19.     </body>
  20. </html>

css代码：

  1. .animation{
  2.    position: absolute;
  3.    top:0px;
  4.    /* 让字体位于窗口顶部右边外围 这里的数据是死的*/
  5.    right: -210px;
  6.    /*
  7.         规定动画的名称
  8.         规定动画的时长
  9.         规定动画的次数
  10.    */
  11.    animation:mymove 10s infinite;
  12.    animation-delay:0s;
  13.  
  14.     /*Safari and Chrome 兼容*/
  15.     -webkit-animation:mymove 10s infinite;
  16.     -webkit-animation-delay:0s;
  17. }
  18. @keyframes mymove{
  19.     from {
  20.         left:100%;
  21.     }
  22.     to {
  23.         left:-200px;
  24.     }
  25. }
  26. @-webkit-keyframes mymove /*Safari and Chrome*/{
  27.     from {left:100%;}
  28.     to {left:-200px;}
  29. }
  30.  
  31. /* 按钮居中 */
  32. html, body {
  33.     margin:;
  34.     padding:;
  35.     height: 100%;
  36.     display: flex;
  37.     align-items: center;
  38.     justify-content: center;
  39.     /* 对于超出的内容隐藏 */
  40.     overflow: hidden;
  41. }
  42. /* 设置按钮的尺寸和文字样式 */
  43. .box {
  44.     width: 200px;
  45.     height: 60px;
  46.     border: 2px solid black;
  47.     text-align: center;
  48.     font-size: 30px;
  49.     line-height: 60px;
  50.     font-family: sans-serif;
  51. }
  52. /* 按钮的每个字母都设置为行内块元素，以便单独设置动效 */
  53. .box span {
  54.     display: inline-block;
  55.     color: blue;
  56. }
  57. /*把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：*/
  58. .box span:nth-child(odd) {
  59.     /* Y轴向上平移自身高度单位 */
  60.     transform: translateY(-100%);
  61. }
  62. .box span:nth-child(even) {
  63.     transform: translateY(100%);
  64. }
  65. /* 用伪元素为每个字母增加一个副本：*/
  66. .box span::before {
  67.     /* attr 的解说 http://www.runoob.com/cssref/pr-gen-content.html */
  68.     content: attr(data-text);
  69.     position: absolute;
  70.     color: red;
  71. }
  72. /* 让伪元素的字母也交错显示，位置与其原始元素相对：*/
  73. .box span:nth-child(odd)::before {
  74.     transform: translateY(100%);
  75. }
  76. .box span:nth-child(even)::before {
  77.     transform: translateY(-100%);
  78. }
  79. /* 为按钮增加鼠标划过样式，设置緩动时间，使其有动画效果：*/
  80. .box:hover span {
  81.     transform: translateY(0);
  82. }
  83. .box span {
  84.     transition: 1s;
  85. }

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. Hibernate4获取sessionFactory

    /** * Location of hibernate.cfg.xml file. * Location should be on the classpath as Hibernate uses * ...

  2. Maps.newHashMapWithExpectedSize(2)

    ☆ Map<String, Object> diffQuota = Maps.newHashMapWithExpectedSize(2); Maps.newHashMapWithExpec ...

  3. LeetCode Pascal's Triangle && Pascal's Triangle II Python

    Pascal's Triangle Given numRows, generate the first numRows of Pascal's triangle. For example, given ...

  4. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中（转）

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  5. 剑指offer-int类型负数补码中1的个数-位操作

    在java中Interger类型表示的最大数是 System.out.println(Integer.MAX_VALUE);//打印最大整数:2147483647 这个最大整数的二进制表示,头部少了一 ...

  6. socket套接字和驱动绑定分析

    1. socket()系统调用 socket系统调用是哪个:socket()有3个参数,因此搜索SYSCALL_DEFINE3,然后在检索socket即可. SYSCALL_DEFINE3(socke ...

  7. 标 题: 有什么办法快速把pc上的网址发送到手机上

    标  题: 有什么办法快速把pc上的网址发送到手机上 transfer2u, pushbullet都可以实现你说的功能,还可以把图片或者选中内容/剪贴板内容发送到手机.后者功能更强,还支持在电脑之间发 ...

  8. 【转】每天一个linux命令（23）：Linux 目录结构

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/21/2780075.html 对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是 ...

  9. OpenWrt的web服务器

    参考: http://www.szchehang.com/news/10602.html 我们登录的路由器主界面就是通过这个软件指定了80端口来访问的.我们要添加自己额外的网站服务,那只需要重新定义一 ...

  10. 【python】实例-python实现两个字符串中最大的公共子串

    由于python中的for循环不像C++这么灵活,因此该用枚举法实现该算法: C="abcdefhe" D="cdefghe" m=0 n=len(C) E=[ ...