文字走马灯置顶显示

2023-04-30 18:54:02html-css083

文字走马灯置顶显示,第1张

应用css实现走马灯置顶显示

超出显示

用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略

但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden

超出跑马等效果

老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。

新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。

对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。

我们需要四句常用命令

overflow:-webkit-marquee//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate//跑马灯样式，分三种。

scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right//跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast//跑动的速度设置。

使用方法：

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

HTML结构：

跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。

123456789101112 <div class="container"> <div class="marquee-sibling"> Breaking News </div> <div class="marquee"> <ul class="marquee-content-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div></div>

CSS样式：

下面是该跑马灯特效的一些基本样式。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 .container { width: 100% background: #4FC2E5 float: left display: inline-block overflow: hidden box-sizing: border-box height: 45px position: relative cursor: pointer} .marquee-sibling { padding: 0 background: #3BB0D6 width: 20% height: 45px line-height: 42px font-size: 12px font-weight: normal color: #ffffff text-align: center float: left left: 0 z-index: 2000} .marquee,*[class^="marquee"] { display: inline-block white-space: nowrap position: absolute} .marquee { margin-left: 25% } .marquee-content-items { display: inline-block padding: 5px margin: 0 height: 45px position: relative} .marquee-content-items li { display: inline-block line-height: 35px color: #fff} .marquee-content-items li:after { content: "|" margin: 0 1em}

初始化插件：

123 $(function (){ createMarquee()})

在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

配置参数：

下面是该跑马灯特效的可用配置参数。

12345678910111213141516171819202122232425262728 $(function (){ createMarquee({ // controls the speed at which the marquee moves duration:30000, // right margin between consecutive marquees padding:20, // class of the actual div or span that will be used to create the marquee - // multiple marquee items may be created using this item's content. // This item will be removed from the dom marquee_class:'.example-marquee', // the container div in which the marquee content will animate. container_class: '.example-container', // a sibling item to the marqueed item that affects - // the end point position and available space inside the container. sibling_class: '.example-sibling', // Boolean to indicate whether pause on hover should is required. hover: false }) })

这个完全是我本人自己真实项目当中的代码

http://1.xifan00520.applinzi.com/weixin/index.html

其实不用js 用css3就能完成

代码如下

标签：{

background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A))

background-clip: text//文字背景区域

-webkit-background-clip: text

-webkit-text-fill-color: transparent

text-fill-color: transparent

-webkit-animation: slidetounlock 2s linear infinite//动画执行的参数第一是动画执行的名字第二是所需时间第三是执行动画的快慢infinite是均速第四个参数是循环

animation: slidetounlock 2s linear infinite

}

为了兼容建议把写全百分比是指动画执行到多少以后执行里面的动画

@keyframes slidetounlock{

0% {

background-position: -2rem 0

}