云技术文章页正文上
本篇内容主要讲解“用css如何实现跑马光”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用css如何实现跑马光”吧! 用css实现跑马光效果的方法：1、创建一个div边框，代码为“css实现边框跑马灯效果1.先整个div边框
小马跑起来~
2.书写css样式
.box{
height:300px;
width:400px;
box-shadow:003pxorange;
text-align:center;
line-height:280px;
}
.horse_run{
background-image:linear-gradient(90deg,rgba(196,233,64,0)0%,rgb(62,224,84)100%),linear-gradient(0deg,rgb(62,224,免费云主机、域名84)0%,rgba(196,233,64,0)100%),linear-gradient(-90deg,rgba(196,233,64,0)0%,rgb(62,224,84)100%),linear-gradient(0deg,rgba(196,233,64,0)0%,rgb(62,224,84)100%);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-size:100px4px,4px100px,100px4px,4px100px;
background-position:-100px1px,calc(100%-1px)-100px,calc(100%+100px)calc(100%-1px),1px0px;
animation:moveLine8sinfinitelinear;
height:calc(100%-2px);
padding:1px;
background-clip:content-box;
}
@keyframesmoveLine{
0%{
background-position:-100px1px,calc(100%-1px)-100px,calc(100%+100px)calc(100%-1px),1px0px;
}
5%{
background-position:0px1px,calc(100%-1px)-100px,calc(100%+100px)calc(100%-1px),1px-100px;
}
30%{
background-position:100%1px,calc(100%-1px)-100px,calc(100%+100px)calc(100%-1px),1px-100px;
}
35%{
background-position:calc(100%+100px)1px,calc(100%-1px)0px,calc(100%+100px)calc(100%-1px),1px-100px;
}
50%{
background-position:calc(100%+100px)1px,calc(100%-1px)100%,calc(100%+100px)calc(100%-1px),-100px-100px;
}
55%{
background-position:calc(100%+100px)1px,calc(100%-1px)calc(100%+100px),100%calc(100%-1px),-100pxcalc(100%+100px);
}
80%{
background-position:calc(100%+100px)1px,calc(100%-1px)calc(100%+100px),0pxcalc(100%-1px),1pxcalc(100%+100px);
}
85%{
background-position:calc(100%+100px)1px,calc(100%-1px)calc(100%+100px),-100pxcalc(100%-1px),1px100%;
}
100%{
background-position:calc(100%+100px)1px,calc(100%-1px)calc(100%+100px),-100pxcalc(100%-1px),1px0px;
}
}
到此，相信大家对“用css如何实现跑马光”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
这篇文章主要讲解了“将HTML转换为纯文本的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“将HTML转换为纯文本的方法有哪些”吧！ 使用Python的BeautifulSoup库BeautifulSo…
文章页内容下
主机管理平台有哪些？
企业网站主机，选云服务器还是虚拟主机？
域名注册申请，必须要实名吗？