css如何实现文字从右到左的滚动效果

发布时间:2022-03-02 15:22:33 作者:iii
来源:亿速云 阅读:508

这篇文章主要介绍了css如何实现文字从右到左的滚动效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css如何实现文字从右到左的滚动效果文章都会有所收获,下面我们一起来看看吧。

  一、js文字滚动代码具体示例:

  HTML代码:

  <!DOCTYPEHTML>

  <htmllang="en">

  <head>

  <title></title>

  <metacharset="UTF-8">

  <styletype="text/css">

  </style>

  </head>

  <body>

  <divclass="container">

  <pclass="text">文字从右到左滚动css文字从右到左滚动css文字从右到左滚动css文字从右到左滚动css文字从右到左滚动css</p>

  </div>

  </body>

  </html>

  <script>

  var$container=$('.container'),

  $text=$('.text');vardirection=1,

  speed=3000;

  vartextMove=function(obj,container,direction,speed){

  varinitMarginLeft='-'+obj.width()+'px';

  obj.css({"margin-left":initMarginLeft});

  varmove=function(){

  varallDistance=obj.width()+container.width(),

  remainedDistance=container.width()-parseInt(obj.css('margin-left')),

  currentSpeed=(speed*remainedDistance)/allDistance;//移动效果

  obj.animate({"margin-left":container.width()+'px'},currentSpeed,'linear',function(){

  obj.stop(true,true);

  obj.css({"margin-left":initMarginLeft});

  move();

  });

  };

  move();

  container.on("mouseenter",function(){obj.stop(true)})

  .on('mouseleave',function(){move()})

  };

  textMove($text,$container,direction,speed);</script>

  以上文字滚动js代码中相关知识点注释:

  vardirection中表示1为从左进入,2为从右进入;

  speed表示数值越小速度越快

  vartextMove,定义文字初始位置

  obj.css()定义动画

  de947a0151aff9ef812f417615de182.pnganimate()方法执行CSS属性集的自定义动画。

  该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如"margin:30px")。字符串值无法创建动画(比如"background-color:red")。

  二、css文字在div里滚动代码示例:

  <styletype="text/css"rel="stylesheet">

  *{margin:0;padding:0;}

  .container{margin:200pxauto;width:500px;height:50px;line-height:50px;border:1pxsolidred;overflow:hidden;}

  .text{position:relative;display:inline-block;white-space:nowrap;/*animation:scroll5s0slinearinfinite;*/

  animation-name:scroll;animation-duration:5s;animation-delay:0ms;animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-name:scroll;-webkit-animation-delay:0ms;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-moz-animation-name:scroll;-moz-animation-delay:0ms;-moz-animation-duration:5s;-moz-animation-timing-function:linear;-moz-animation-iteration-count:infinite;}

  @-webkit-keyframesscroll{

  100%{margin-left:100%;}

  }@-moz-keyframesscroll{

  100%{margin-left:100%;}

  }@-ms-keyframesscroll{

  100%{margin-left:100%;}

  }.text:hover{-webkit-animation-play-state:paused;}

  </style>

  相关知识点注释:

  通过@keyframes规则,您能够创建动画。原理是,将一套CSS样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套CSS样式。以百分比来规定改变发生的时间,或者通过关键词"from"和"to",等价于0%和100%。0%是动画的开始时间,100%动画的结束时间。为了获得最佳的浏览器支持,您应该始终定义0%和100%选择器。

  animationname必需。定义动画的名称。

  keyframes-selector必需。动画时长的百分比。

  合法的值:0-100%from(与0%相同)to(与100%相同)

  css-styles必需。一个或多个合法的CSS样式属性。

css如何实现文字从右到左的滚动效果

关于“css如何实现文字从右到左的滚动效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“css如何实现文字从右到左的滚动效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. HTML实现文字滚动效果的方法
  2. css如何实现滚动文字,实现滚动文字的代码

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

css

上一篇:CSS滤镜库和工具有哪些

下一篇:css的结构伪类选择器有哪些

相关阅读

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

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