您正在使用 IPV4 [34.204.198.73] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 025
2025年 高 考 326
2025年 元 旦 169
2025年 春 节 197
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
css3实现文字首尾衔接跑马灯的示例代码
内容摘要: html部分:divid='app'divclass='top'pspanclass='tips'由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~/spanspan由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~/span/p/divdivclass='main'h6然后这里放的就是卤煮/h6h4外放堪称手机圈/h4h......
html部分:

<divid="app">

<divclass="top">

<p>

<spanclass="tips">由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~</span>

<span>由于大促期间订单量激增,您的订单送达时效可能出现延迟,请您耐心等待~</span>

</p>

</div>

<divclass="main">

<h6>然后这里放的就是卤煮</h6>

<h4>外放堪称手机圈</h4>

<h2>宇宙无敌第一</h2>

<h6>小米10Pro</h6>

<h2>wo不接受争辩</h2>

<h3>·</h3>

<h3>·</h3>

<h3>·</h3>

<h3>·</h3>

</div>

</div>

css部分:

.tips{

width:560px;

}

p{

position:absolute;

height:34px;

left:34px;

white-space:nowrap;

display:flex;

animation:movelinear12sinfinite;

animation-delay:3s;

}

@keyframesmove{

0%{left:34px;}

100%{left:-526px;}

}

/*这里以下请忽略,重点在上面*/

*{margin:0;padding:0;}

body,html{height:100%;}

#app{

height:100%;

background:#ececec;

margin:0auto;

display:flex;

flex-direction:column;

}

.main{

flex:1;

}

.top{

position:relative;

overflow:hidden;

height:34px;

background:#fff;

}

.topspan{

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,#f000%,#f0060%,transparent100%);

}

.top::after{

content:"";

position:absolute;

right:0;

top:0;

height:100%;

width:34px;

z-index:9;

background-image:linear-gradient(-90deg,#f000%,#f0060%,transparent100%);

}

h1,h2,h3,h4,h5,h6{

margin:20pxauto;

text-align:center;

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:使用CSS3实现文字带轮廓边框特效的方法

 

下一篇:获取 textarea 标签第n行的文字的js代码

发布日期:2023/11/13
手机扫二维码直达本页
发布时间:16:12:29
点  击:3
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,速盾网络提供加速防护
运行时间载入中.....