用css怎么实现跑马光

用css实现跑马光效果的方法：1、创建一个div边框，代码为“…”；2、通过设置css属性为“@keyframes moveLine {0% {background-position: -100px 1px, calc(100% – 1px) -100px, calc(100%+100px)…”即可。

本教程操作环境：Windows10系统、CSS3版、DELL G3电脑

用css怎么实现跑马光？

css实现边框跑马灯效果

先上效果图

立即学习“前端免费学习笔记（深入）”；

1.先整个div边框

小马跑起来~

登录后复制

2.书写css样式

.box {  height: 300px;  width: 400px;  box-shadow: 0 0 3px orange;  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: 100px 4px, 4px 100px, 100px 4px, 4px 100px;  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;  animation: moveLine 8s infinite linear;  height: calc(100% - 2px);  padding: 1px;  background-clip: content-box;} @keyframes moveLine {  0% {    background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;  }  5% {    background-position: 0px 1px, 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), -100px calc(100% + 100px);  }  80% {    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);  }  85% {    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%;  }  100% {    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;  }}

登录后复制

推荐学习：《css视频教程》

以上就是用css怎么实现跑马光的详细内容，更多请关注【创想鸟】其它相关文章！