温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

用css如何实现跑马光

发布时间:2023-01-31 13:39:56 阅读:236 作者:iii 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“用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 {
  height300px;
  width400px;
  box-shadow0 0 3px orange;
  text-align: center;
  line-height280px;
}
 
.horse_run {
  background-imagelinear-gradient(90degrgba(1962336400%rgb(6222484100%), linear-gradient(0degrgb(62224840%rgba(196233640100%), linear-gradient(-90degrgba(1962336400%rgb(6222484100%), linear-gradient(0degrgba(1962336400%rgb(6222484100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size100px 4px4px 100px100px 4px4px 100px;
  background-position: -100px 1pxcalc(100% - 1px) -100pxcalc(100% + 100pxcalc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear;
  heightcalc(100% - 2px);
  padding1px;
  background-clip: content-box;
}
 
@keyframes moveLine {
  0% {
    background-position: -100px 1pxcalc(100% - 1px) -100pxcalc(100% + 100pxcalc(100% - 1px), 1px 0px;
  }
  5% {
    background-position0px 1pxcalc(100% - 1px) -100pxcalc(100% + 100pxcalc(100% - 1px), 1px -100px;
  }
  30% {
    background-position100% 1pxcalc(100% - 1px) -100pxcalc(100% + 100pxcalc(100% - 1px), 1px -100px;
  }
  35% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1px0pxcalc(100% + 100pxcalc(100% - 1px), 1px -100px;
  }
  50% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1px100%calc(100% + 100pxcalc(100% - 1px), -100px -100px;
  }
  55% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1pxcalc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px);
  }
  80% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1pxcalc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);
  }
  85% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1pxcalc(100% + 100px), -100px calc(100% - 1px), 1px 100%;
  }
  100% {
    background-positioncalc(100% + 100px1pxcalc(100% - 1pxcalc(100% + 100px), -100px calc(100% - 1px), 1px 0px;
  }
}

到此,相信大家对“用css如何实现跑马光”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI

开发者交流群×