上学时同学有个来电带跑马灯的手机，可把我羡慕坏了，可等我买的起手机时，跑马灯不流行了，甚伤萝卜心！

今天就用CSS做个文字的跑马灯特效，缅怀一下本萝卜逝去的青春！

道具：会敲代码的巧手、七窍玲珑心、会辩色的睿智双眼

原理：文字底部放张背景图，文字color设为透明(color:tranparent;)，设置渐变色背景图(

background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);

)，设置背景的绘制区域为text(-webkit-background-clip:text;),然后使用动画不停移动背景图

bingo!!!!

效果图

代码

<html>

    <head>

        <meta charset="UTF-8">

        <!--<script>less.watch();</script>-->

        <style>

            .title {

                display: block;

                text-decoration: none;

                text-align: center;

                line-height: 1.5;

                margin: 20px 0px;

                background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);

                color: transparent;

                -webkit-background-clip: text;

                background-size: 200% 100%;

                -webkit-animation: slide 2s infinite linear;

                animation: slide 5s infinite linear;

                font-size: 40px;

            }

            @keyframes slide {

                0%  {

                  background-position: 0 0;

                }

                100% {

                  background-position: -100% 0;

                }

            }

        </style>

    </head>

    <body>

        <p class="title">

             为了引起你的注意，我真是煞费苦心

        </p>

    </body>

</html>

CSS文字的跑马灯特效的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  3. Androidd Studio 之多行文字跑马灯特效

    •效果展示图 •参考资料 两种方法实现TextView跑马灯效果(字体横向滚动) •出现的问题 新建 Java 文件继承 TextView 时出现问题: •解决方法 不应该继承 $TextView$ ...

  4. Unity3D 文字滚动跑马灯效果

    需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...

  5. 使用 JS 实现文字上下跑马灯

    Ø  前言 今天在做商城首页时,遇到一个上下跑马灯功能,因为之前也只是接触过左右的跑马灯,一时还不知道从何下手.在网上看了几个 demo,并亲自运行了一下,是可以实现的.但是,能运行不知其所以然也不行 ...

  6. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

  7. 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  8. 7.纯 CSS 创作一个 3D 文字跑马灯特效

    原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <div class="box"& ...

  9. CSS效果：跑马灯按钮

    HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

随机推荐

  1. WPF 10天修炼 第二天- XAML语言

    XAML是什么 XAML是一种与.NET CLR紧密集成的声明性UI标记语言.XAML中的对象元素对应到CLR中的类型或结构.XAML命名空间对应到CLR中类的命名空间,元素类型则对应到CLR中的类型 ...

  2. VBA开发手记

    本博文,将主要记录VBA for Excel项目中遇到并解决的问题,不定期更新. 1.日期单元格前面加空格就变成文本了,find查找参数注意:what:=Cstr(Date),lookat:=2 2. ...

  3. JSON字符串自动转换

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObj ...

  4. 用servlet进行用户名和密码校验

    用servlet进行用户名和密码校验 先来看看效果-- 这里为了方便查看,密码框并没有使用password输入框,而是使用了text框 总体来说思路还是比较简单 1.先来个form,配置好action ...

  5. pyqt win32发送QQ消息

    标题应该改为:python+win32发送QQ消息,全程使用python套个pyqt壳. 其实代码来自: http://blog.csdn.net/suzyu12345/article/details ...

  6. [转] 如何设置双网卡同时连接内网外网_bpao_新浪博客

    已剪辑自: http://blog.sina.com.cn/s/blog_5d3e229c0100skwe.html 如何设置双网卡同时连接内网外网 . 通过无线网络连接外网,确保连接成功后开始第二步 ...

  7. haproxy代理配置段参数设定

    代理配置段:有四个配置段 default:设定默认参数, frontenf:前端服务器的设定 backend:后端服务器的设定 listening:是设定前端和后端一一对应的设定 参数: 1bind: ...

  8. Python学习（四十二）—— Djago-model进阶

    一.QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # (LIMI ...

  9. 韩天峰《大话PHP设计模式》听课笔记

    课程主要内容 1.PHP面向对象的高级特性 2.11种设计模式 3.PSR-0,Composer,Phar等最流行的技术 目标 掌握PHP各类设计模式,并具备设计纯面向对象框架和系统的能力   二.编 ...

  10. django-celery配置

    1.项目启动顺序: 启动项目: python manage.py runserver 启动celery beat python manage.py celery beat 启动celery worke ...