<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css跑马灯</title>
<style>
body{
font-size: 14px;
}
/* 跑马灯 */
.homepage-news {
display: flex;
align-items: center;
width: 100%;
height: 4rem;
box-sizing: border-box;
padding: 0 2rem 0 2.1rem;
 
}
.left-icon {
margin-right: 0.5rem;
font-size: 1.6rem;
color: #D3B05B;
}
.right-icon {
font-size: 1.1rem;
color: #D3B05B;
}
.homepage-news-msg-wrap {
height: 4rem;
line-height: 4rem;
flex-grow: 1;
overflow: hidden;
}
.homepage-news-msg {
color: rgb(211, 176, 91);
font-size: 1.3rem;
width: 100%;
height: 4rem;
display: inline-block;
line-height: 4rem;
white-space: nowrap;
transition: transform;
animation: home-news 5s infinite;
}
/* 跑马灯 */
@keyframes home-news {
0% {
transform: translate3d(100%, 0, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
</style>
</head>
<body>
<div class="homepage-news">
<i class="lufont icon-caution left-icon">!</i>
<div class="homepage-news-msg-wrap">
<span class="homepage-news-msg">您有未完成面签的订单，逾期将被取消，请尽快面签</span>
</div>
<i class="lufont icon-arrowright2 right-icon">></i>
</div>
</body>
</html>

css如何实现（animation）跑马灯效果的更多相关文章

  1. csdn左侧个人栏目美化，css英文颜色大全，跑马灯效果，点击转到qq联系，点击转到发送邮件。

    跑马灯效果: <a href="http://mmmmmm.me" target="_blank"><marquee><font ...

  2. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  3. JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. Vue-使用计时器实现跑马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  6. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  7. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  8. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  9. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  10. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

随机推荐

  1. [WSL-1-Ubuntu]使用oh-my-zsh美化你的WSL(附脚本)

    在腾讯云买的那个1c2g的服务器,想用mycat搭建一个mysql cluser,用docker部署了一主一从内存就没了一半,可一主一从没啥作用,起码也得2主2从吧?而且还有HA呢,但内存和钱包不给力 ...

  2. 第九章：用Python处理省份城市编码数据

    文章目录 项目背景 项目代码 新增省份编码 获取编码映射数据 合并数据 统计省份用户数 使用SQL实现 源码地址 本文可以学习到以下内容: 免费获取全国省份.城市编码以及经纬度数 使用 pandas ...

  3. gradle的配置

    第一次接触公司的JAVA项目,使用了gradle,于是乎到网上搜索一番,终于弄明白了是个什么东东,由于之前也没有接触过maven和ant,所以对这个东西还是很陌生.好了,废话不多说,开始我的环境搭建. ...

  4. Linux下aria2详细配置，以及接管浏览器下载项

    本篇是在Deepin的环境下操作,大概可适用与Ubuntu和Debian,其他系的Linux不确定, 首先,我们安装aria2,使用命令行(在桌面右键可以打开)输入sudo apt install a ...

  5. 组件中的data为什么不是一个对象而是一个函数?

    组件中的data为什么不是一个对象而是一个函数? 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于 ...

  6. 一个因为windows系统缺失文件而导致的pyspark的BUG

    背景: 在windows 系统中开发pyspark程序. 一个简单的WC程序: from pyspark.sql import SparkSession spark = SparkSession.bu ...

  7. yarn 更新依赖包

    yarn upgrade --latest 其他的以后再记录.

  8. 多线程问题sleep与wait

    涉及到的三个方法:wait():一旦执行此方法,当前线程就进入阻塞状态,并释放同步监视器notify():一旦执行此方法,就会唤醒被wait的一个线程.如果有多个线程被wait,就唤醒优先级高:not ...

  9. xss-labs

    level1 <h1 align=center>欢迎来到level1</h1> <h2 align=center>欢迎用户te111</h2><c ...

  10. JAVA常用类（一）Syatem类

    System类:系统类,主要用于获取系统的属性和方法,没有构造方法,其属性都是静态属性,方法都是静态方法 .System类是jdk提供的一个工具类,有final修饰,不可继承,由名字可以看出来,其中的 ...