css3 文字走马灯,前端开发:css3实现文字首尾衔接跑马灯
故事背景
事情是这样的,卤煮无意间得知一款外放效果宇宙无敌第一的手机!!!脑袋一热就趁着阿东618大促搞了一台,毕竟卤煮是一个地道的电子发烧友!!!但是当卤煮查询物流信息的时候。。。。。。
好吧,我这该死的探索欲,被这突兀的跑马灯吸引住了目光(ca,今天看样子是收不到货了!!!)
那就说说怎么实现它吧(这个梗接的就是这么硬)
效果图
逻辑描述
p标签包含俩span标签(提示的文字),要两个span,或者2个以上,p标签定位,改变p标签left值进行运动,运动到第一个span标签的结尾处,看图!!!当第二个span到达起始位置时,循环第二次运动,刚好会无缝衔接上。
无论PC还是移动端,当然了,走马灯肯定移动端出现居多。按设计稿来,UI会给你span标签文字的具体宽度,那么:运动距离=span宽度+两个span之间的留白-左边红色区域的left值
代码实现
html部分:
由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~
由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~
然后这里放的就是卤煮
外放堪称手机圈
宇宙无敌第一
小米10 Pro
wo不接受争辩
·
·
·
·
css部分:
.tips{
width: 560px;
}
p{
position: absolute;
height: 34px;
left: 34px;
white-space: nowrap;
display: flex;
animation: move linear 12s infinite;
animation-delay:3s;
}
@keyframes move {
0%{ left: 34px; }
100%{ left: -526px; }
}
/* 这里以下请忽略,重点在上面 */
*{margin: 0; padding: 0;}
body,html{height: 100%;}
#app{
height: 100%;
background:#ececec;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.main{
flex: 1;
}
.top{
position: relative;
overflow: hidden;
height: 34px;
background: #fff;
}
.top span{
line-height: 34px;
display: inline-block;
}
.top::before{
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 34px;
z-index: 9;
background-image: linear-gradient(90deg,#f00 0%, #f00 60%, transparent 100%);
}
.top::after{
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 34px;
z-index: 9;
background-image: linear-gradient(-90deg,#f00 0%, #f00 60%, transparent 100%);
}
h1,h2,h3,h4,h5,h6{
margin: 20px auto;
text-align: center;
}
个人总结
卤煮在项目中有涉及到跑马灯,而且卤煮项目中用的是一个比较偷懒的方法,就是利用marquee标签,这个就自带跑马灯效果好嘛!!!这个标签很强大,一个标签即可解决你写一大堆css或者js,那我绕这么一大圈干嘛?
首先,它不能实现我这种首尾衔接!!!
其次,官网关于这个标签的描述是这样的:This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
咳咳~考虑到英语不好的童鞋,翻译一下就是: 元素已经过时,请不要再使用。尽管一些浏览器仍然支持它,但它不是必须的。此外,使用这个元素基本上是你可以对你的用户做最糟糕的事情之一,所以请不要这样做。
所以,选择卤煮的吧。等等!当屏幕宽度足以放下提示语的时候应该不做运动,这一点用js来控制,就当作课下作业吧!
标签:css3,span,标签,100%,top,height,跑马灯,34px,前端开发
来源: https://blog.csdn.net/yman_pro/article/details/106852714
css3 文字走马灯,前端开发:css3实现文字首尾衔接跑马灯相关推荐
- 【web前端开发】CSS文字和文本样式
文章目录 前言 字体大小 字体粗细 字体样式 字体 font复合属性 文本缩进 文本水平对齐方式 文本修饰线 行高 颜色 标签水平居中 ⭐思维导图 前言 本篇文章主要讲解CSS中的文字和文本样式及一些 ...
- css文字瘦,前端开发CSS减肥工具:CSS Usage
做 web前端开发用什么工具包 前端开发产业是指什么意思 前端构建工程师经常会遇到随着网站产品的规模扩大.产品数量.日常专题上下线等情况,造成网站的CSS Usage.首先,我们需要安装Firefox ...
- js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- 【前端学习日记】利用Vue实现跑马灯的效果
一.效果 按下roll按钮,文字进行滚动: 按下stop按钮,文字停止滚动: 二.重要代码 1.通过以下方式引入Vue <!-- 开发环境版本,包含了有帮助的命令行警告 --> <s ...
- ADI Blackfin DSP处理器-BF533的开发详解14:LED跑马灯(含源代码)
接口讲完了,下面写点应用程序,GPIO最典型的应用,LED跑马灯. 硬件准备 ADSP-EDU-BF533:BF533开发板 AD-HP530ICE:ADI DSP仿真器 软件准备 Visual DS ...
- 【前端开发系列】—— 文字阴影与样式
id与class的区别 id是这个界面唯一的元素,标识某个特定的容器,比如div等等.而class是一种样式,可以应用与多个div. 另外他们在配置CSS也是不同的: id: div#test1{.. ...
- html普通幻灯片效果,超酷的CSS3幻灯片效果-前端开发博客_html/css_WEB-ITnose
对于 css3 的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的). 如果 ...
- java 走马灯程序,详解微信小程序实现跑马灯效果(附完整代码)
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
- html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发 编辑 锁定 讨论 上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
最新文章
- php最近还热门么,2018什么开发语言热门 PHP开发语言火侯还会持续吗
- Ubuntu 14.04 DNS 配置
- Java中的Set对象去重
- Hadoop入门进阶步步高(六-Hadoop1.x与Hadoop2的区别
- 十年数据分析经验,总结出这三类分析工具最好用
- 【Spring Cloud】注册中心-Nacos
- ios官方菜单项目重点剖析附项目源码
- 火影忍者服务器维护时间,火影手游12月12日更新:仙鸣增加破霸体,小自来也变蛙时间减半!...
- c语言如何用气泡法编程最大 最小值,[c语言冒泡排序法]C语言冒泡排序法详解
- 定时任务时间表达式的规则
- Facebook十大失误回顾
- 外国程序员和中国程序员的区别
- Unity灯光烘焙系统
- STM32【H7】理论——综述、HAL库简述
- yolov3模型部署实战weights转onnx并推理
- MATLAB读取文件中的所有同类型数据,并记录其峰值
- IMX6Q的硬编码(VPU)的工程代码移植
- 网页设计之竞赛平台模块
- 计算机网络-自顶向下方法-笔记【第2章-应用层】
- Mysql DATE_FORMAT 用法