不用js来实现。

html:

<div class="box">
<p class="animate">
文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
</p>
</div>

css:

.box {
width: 100%;
margin: 0 auto;
border: 1px solid #ff6700;
overflow: hidden;
} .animate {
padding-left: 20px;
font-size: 12px;
color: #000;
display: inline-block;
white-space: nowrap;
animation: 5s wordsLoop linear infinite normal;
} @keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
} @-webkit-keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}

【css】纯css实现文字循环滚动效果的更多相关文章

  1. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  2. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  3. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  4. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  6. 图片循环滚动效果shader

    背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...

  7. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  8. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

随机推荐

  1. LeetCode03 - 无重复字符的最长子串(Java 实现)

    LeetCode03 - 无重复字符的最长子串(Java 实现) 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/longest-substri ...

  2. 清除LabVIEW中波形图表或波形图中的历史数据

    清除LabVIEW中波形图表或波形图中的历史数据 方法一: 前面板中右键单击波形图表或波形图,选择数据操作>>清除图表或数据操作>>清除图形 方法二:(编程方法) 用于清除图表 ...

  3. Django :执行 python manage.py makemigrations 时报错 TypeError: __init__() missing 1 required positional argument: 'on_delete'

    原因 执行命令 python manage.py makemigrations 报错 TypeError: __init__() missing 1 required positional argum ...

  4. bom操作,事件与jquery

    BOM操作中 window关键字 可以不写 DOM操作 学习如何查找节点 如何查找标签 选择器 事件 当符合某个条件下 自动触发的动作/响应 js绑定事件的方式 方式1 不推荐使用 <butto ...

  5. 一款强大的Visual Studio插件!CodeRush v19.1.9全新来袭

    CodeRush是一个强大的Visual Studio® .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume ...

  6. Python 读写XML文件

    Python 生成XML文件 from xml.dom import minidom # 生成XML文件方式 def generateXml(): impl = minidom.getDOMImple ...

  7. 小程序上传base64的图片,可上传多张

    微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...

  8. C# Lambda表达式学习笔记

    本笔记摘抄自:https://www.cnblogs.com/leslies2/archive/2012/03/22/2389318.html,记录一下学习过程以备后续查用.     一.Lambda ...

  9. jquery mouseenter()方法 语法

    jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...

  10. Git 如何针对项目修改本地提交提交人的信息

    Git 如果不进行修改的话,在默认情况下将会使用全局的用户名称和电子邮件. 但是在 GitHub 中是通过用户邮件来进行提交人匹配的. 如何针对项目来修改提交的用户信息? 针对 TortoiseGit ...