<!DOCTYPE html>
<html lang="en">
<div class="wrap">
<ul class="list">
的撒看到那是的啦了分你兰萨辽宁大连
</ul>
</div>
</html>

<style>
* {
margin:0;
padding:0;
}
.wrap {
overflow:hidden;
width:500px;
height:100px;
border:1px solid #000;
margin:50px auto;
}
.list {
position:relative;
top:0px;
left:0px;
width:200%;
height:100%;
border:1px solid #f00;
list-style:none;
animation:mymove 3s infinite linear; //滑动速度控制
}
@-webkit-keyframes mymove {
from {
left:0px;
}
to {
left:-300px;
}
}
</style>

效果：

    的撒看到那是的啦了分你兰萨辽宁大连

* { margin: 0; padding: 0 }
.wrap { overflow: hidden; width: 500px; height: 100px; border: 1px solid rgba(0, 0, 0, 1); margin: 50px auto }
.list { position: relative; top: 0; left: 0; width: 200%; height: 100%; border: 1px solid rgba(255, 0, 0, 1); list-style: none; animation: 3s linear infinite mymove }
@-webkit-keyframes mymove {
from {
left:0px;
}
to {
left:-300px;
}
}

css3自动滚动的更多相关文章

  1. Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  2. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  3. Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  4. EUI 自动滚动的聊天文本

    一 自动滚动的聊天文本 当文本输入改变时,将scrollV值等于maxScrollV值. private scrollLabel:eui.Label; egret.Tween.).call(()=&g ...

  5. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  6. Android 如何实现带滚动条的TextView，在更新文字时自动滚动到最后一行？

    1.在布局文件中放置一个TextView,给它添加scrollbars和fadeScrollbars两个属性. 如下设置:滚动条为垂直滚动条,并且一直可见(当TextView中的文字行数超过页面能显示 ...

  7. JAVA 如何使JScrollPane中的JTextArea自动滚动到最后一行？

    1.要使JTextArea带有滚动条,需将JTextArea对象添加到JScrollPane中. JTextArea logArea = new JTextArea(15, 35); //创建JTex ...

  8. Android文字跑马灯控件（文本自动滚动控件）

    最近在开发一个应用,需要用到文本的跑马灯效果,图省事,在网上找,但老半天都找不到,后来自己写了一个,很简单,代码如下: import android.content.Context; import a ...

  9. WPF TextBox自动滚动到最户一行

    textBox经常用来显示程序的运行状态或者消息,如何让他自动滚动呢? 在显示消息代码下加一条自动滚动到底部的语句即可: TextBox1.ScrollToEnd(); (如果要显示垂直滚动条设置Ve ...

  10. Android:TextView 自动滚动(跑马灯) （转）

    Android:TextView 自动滚动(跑马灯)       TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true ...

随机推荐

  1. 批量将多个相同Excel表格内容合并到一个Excel表格的sheet工作簿当中。

    Sub Books2Sheets()Dim fd As FileDialog Set fd = Application.FileDialog(msoFileDialogFilePicker) Dim ...

  2. Kafka Connect学习

    一.基础介绍 1.概念 2.Debezium 为捕获数据更改(change data capture,CDC)提供了一个低延迟的流式处理平台.可以消费数据库每一个行级别(row-level)的更改. ...

  3. SLM6500电磁干扰认证设计PCB

    SLM6500 是一款面向5V交充适配器的2A离子电池充电器.它是采用1.5MHz固定频率的步降压型转换器,利用芯片内部的功率晶体管电池进行涓流.恒流和恒压充电.充电电流可用外部电阻编程设定,持续充电 ...

  4. 记录一次 MyBatis 批量插入的优化-BatchInsert

    记录在一次项目问题排查过程中,遇到在数据量大的情况下,向数据库批量插入非常耗时长的问题. 1.分析 首先,代码是在 service 中,采用的是 for 循环调用 insert 语句的方式: for( ...

  5. 数据科学家赚多少？基于pandasql和plotly的薪资分析与可视化 ⛵

    作者:韩信子@ShowMeAI 数据分析实战系列:https://www.showmeai.tech/tutorials/40 AI 岗位&攻略系列:https://www.showmeai. ...

  6. python什么是异常?如何处理异常

    异常处理 什么是异常 异常是程序错误发生的信号.程序一旦出现错误,就会产生一个异常,如果程序中没有处理该异常,该异常就会抛出来,程序的运行也随即终止. 错误分为两种 1.语法错误 2.逻辑错误 如何处 ...

  7. 填坑日志-云网络智慧课堂双网卡Mac地址读取错误的问题及解决

    云网络智慧课堂的双网卡问题记录及解决方案 教师端 其实这里双网卡的问题一直没有解决,分为了两部分,一部分是教师端,一部分是学生端.症状类似,问题也类似,都是在设计之初因为硬件限制可能没有考虑到双网卡的 ...

  8. docker 第一课

    centos安装docker yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo ...

  9. &amp;#127538;Eclipse通过jdbc连接数据库制作简单登陆界面【新手必看】

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  10. DNS欺骗：网站克隆实现网站钓鱼攻击

    1 DNS 1.1 DNS是什么? 域名系统(Domain Name System)是互联网使用的命名系统,用来将主机域名转换为 ip 地址,属于应用层协议,使用 UDP 传输. 1.2 为什么需要D ...