利用css如何实现跑马光
发布时间：2023-07-24 10:42:10 所属栏目：教程 来源：转载
导读： 本篇内容主要讲解“用css如何实现跑马光”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用css如何实现跑马光”吧
|
本篇内容主要讲解“用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实现边框跑马灯效果 1.先整个div边框 <div class="box horse_run">小马跑起来~</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; } } （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
