本篇内容主要讲解“用css如何实现跑马光”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用css如何实现跑马光”吧!
用css实现跑马光效果的方法：1、创建一个div边框，代码为“<div class="box horse_run">...</div>”；2、通过设置css属性为“@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100%+100px)...”即可。
css实现边框跑马灯效果
先整个div边框
<div class="box horse_run">小马跑起来~</div>
书写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如何实现跑马光”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
