用css实现跑马光效果的方法:1、创建一个div边框,代码为“202d29639fcc8d8b5757fd7359342f7b...16b28748ea4df4d9c2150843fecfba68”;2、通过设置css属性为“@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100%+100px)...”即可。
本教程操作环境:Windows10系统、CSS3版、DELL G3电脑
用css怎么实现跑马光?
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; } }
推荐学习:《css视频教程》
以上是用css怎么实现跑马光的详细内容。更多信息请关注PHP中文网其他相关文章!