jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果，文字在上面移动时，就像是文字投影到墙壁上，在转角出会改变运动方向。

效果展示 http://hovertree.com/texiao/jquery/83/

效果图如下：

完整HTML代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery+CSS3文字跑马灯特效 - 何问起</title><base target="_blank" />

<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/83/css/style.css">

</head>

<body>

<div id="hovertreemarquee">

    <div><span>I ❤ HoverTree 我❤何问起 </span></div>

    <div aria-hidden="true"><span>I ❤ HoverTree 我❤何问起 </span></div>

</div>

<form onsubmit="setText(event)">

    <label for="textsource">使用你自己的文本</label>

    <input type="text" id="textsource" value="hwq2.com Is A Good Site!" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度" placeholder="请输入文本：hovertree.com">

    <input type="submit" class="btn" value="使用">

</form>

    <div class="hovertreeinfo"><p>可以输入其他文本，然后点击“使用”按钮。<br />

        例如：1314520 hovertree.com

             <br />或者： 欢迎访问何问起

        <br />

                        <a href="http://hovertree.com/h/bjaf/bmfmnq8a.htm">特殊爱心符号点这里</a>

       <br />何问起提示：可以放大或者缩小浏览器宽度查看效果。

        </p></div>

<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

        function setText(event){

          event.preventDefault();

          leftText.innerText = textsource.value.toUpperCase();

          rightText.innerText = textsource.value.toUpperCase();

        }

        var leftText = document.querySelector("#hovertreemarquee div:first-of-type span");

        var rightText = document.querySelector("#hov"+"ertreemarquee div:last-of-type span");

        var textsource = document.getElementById("textsource");

        setText();

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：FireFox、Chrome、Edge、Safari、Opera、傲游、搜狗、世界之窗、IE11. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>

<a href="http://hovertree.com/h/bjaf/paomadeng.htm">代码说明</a></p>

</div>

</body>

</html>

推荐：http://hovertree.com/h/bjaf/bmfmnq8a.htm

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery+CSS3文字跑马灯特效的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS文字的跑马灯特效

    上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心! 今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春! 道具:会敲代码的巧手.七窍玲珑心.会 ...

  6. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

  7. JavaScript实现文字跑马灯

    其实实现文字的跑马灯和实现图片轮播的原理是一样的. 下面是我自己实现的,文字的位置可以随便更改,效果不会变,文字的内容可以通过ajax获取,同时,可以直接用Jquery改写一下,很方便. <!D ...

  8. js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript ...

  9. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

随机推荐

  1. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  2. 马里奥AI实现方式探索 ——神经网络+增强学习

    [TOC] 马里奥AI实现方式探索 --神经网络+增强学习 儿时我们都曾有过一个经典游戏的体验,就是马里奥(顶蘑菇^v^),这次里约奥运会闭幕式,日本作为2020年东京奥运会的东道主,安倍最后也已经典 ...

  3. Spring的数据库开发

                                Spring JDBC框架操作mysql数据库 Spring中的JDBC为我们省去连接和关闭数据库的代码,我们着重关注对数据库的操作.Sprin ...

  4. 【C#公共帮助类】 ToolsHelper帮助类

    这个帮助类,目前我们只用到了两个,我就先更新这两个,后面有用到的,我会继续更新这个Helper帮助类 在Tools.cs中 有很多方法 跟Utils里是重复的,而且Utils里的方法更加新一点,大家可 ...

  5. java中易错点（一）

    由于replaceAll方法的第一个参数是一个正则表达式,而"."在正则表达式中表示任何字符,所以会把前面字符串的所有字符都替换成"/".如果想替换的只是&qu ...

  6. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

  7. sqlyog导出json数据格式支持mysql数据转存mongodb

    <!-------------知识的力量是无限的(当然肯定还有更简单的方法)-----------!> 当我考虑将省市区三级联动数据从mysql转入mongodb时遇到了网上无直接插入mo ...

  8. Josephus环类问题，java实现

    写出一个双向的循环链表,弄一个计数器,我定义的是到三的时候,自动删除当前节点,很简单. package Com; import java.util.Scanner; /* * 约瑟夫环问题,有n个人组 ...

  9. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  10. Go语言实战

    作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文通过从无到有创建一个利用Go语言实现的非常简单的HttpServe ...