css3 实现文字横幅无缝滚动

这篇具有很好参考价值的文章主要介绍了css3 实现文字横幅无缝滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 css3 关键帧 @keyframes 和 animation 属性实现文字横幅无缝滚动。

css3 实现文字横幅无缝滚动,CSS,css3,前端,css文章来源地址https://www.toymoban.com/news/detail-637877.html

<template>
  <div class="skiHallBanner">
    <div class="skiHallBanner-text">
      <span>{{ text }}</span>
    </div>
  </div>
</template>

<script>
import '@/utils/rem/skiHallBanner'

export default {
  name: 'SkiHallBanner',
  data() {
    return {
      text: 'xxx公告xxx公告xxx公告xxx公告xxx公告'.repeat(2),
    }
  },
}
</script>

<style lang="scss" scoped>
.skiHallBanner {
  width: 2300px;
  height: 230px;
  background: url('../../assets/images/skiHall/banner.png') no-repeat 100%/100%
    100%;

  &-text {
    position: relative;
    width: 2160px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;

    span {
      position: absolute;
      top: 0;
      font-size: 49px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-style: italic;
      color: #e4f2ff;
      text-align: left;
      line-height: 4.6;
      text-shadow: 5px 7px 0px rgba(0, 66, 255, 0.2),
        16px 23px 16px rgba(14, 19, 48, 0.52);

      animation: 26s scroll linear infinite normal;

      &::before {
        content: '';
        display: inline-block;
        width: 2180px;
        height: 100%;
      }
    }
  }
}

@keyframes scroll {
  from {
    transform: translate(0%, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}
</style>

到了这里,关于css3 实现文字横幅无缝滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3实现的4种3D文字效果

    本文将介绍css3实现的4种3D文字效果。代码很简单,效果很震撼: 代码实现 html: css: 代码解释 1、3D文字效果运用原理就是像Photoshop一样,我们在文字的下方或上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作出3D效果。同时我们层数越多,其

    2024年02月11日
    浏览(69)
  • 使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果; 相对过渡动画, animation 动画可以

    2024年02月16日
    浏览(88)
  • css 实现文字横向循环滚动

    ## 直接上代码,html部分

    2024年02月12日
    浏览(49)
  • CSS3 实现边框圆角渐变色&&渐变文字效果

      background-clip: text; 是CSS中的一个属性,用于指定背景图片或颜色的裁剪方式,裁剪的区域是文本的轮廓。具体来说,就是将背景图片或颜色限制在文本的轮廓内,而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果,比如文字渐变、文字填充等。  参考:

    2024年02月16日
    浏览(50)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(61)
  • css3英文文字换行,超过两行...展示

    需求:超过两行...展示 开发的过程中发现div内容中文可以换行英文不换行,导致长度会溢出。 是英文全英文的话浏览器会解析成一个单词, 加上这句就好了 一开始不知道是会解析成一个单词,用字符串拼接处理了,  但是英文、数字占位比汉字要短,存在这种情况  后来发

    2024年02月10日
    浏览(51)
  • HTML5+CSS3+JS小实例:鼠标滚轮水平滚动

    实例:鼠标滚轮水平滚动 技术栈:HTML+CSS+JS 效果: 源码: 【html】

    2024年02月06日
    浏览(38)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(48)
  • 前端之css3

            1 新增实用的选择器,例如动态伪类,目标伪类,伪元素         2 新增更好的视觉效果         3 新增丰富的背景效果         4 新增全新的布局方案         5 新增web字体         6 新增颜色,hsl,hsla,rgba         7 新增2D和3D变换         8 新增动画和过渡效

    2024年02月13日
    浏览(60)
  • 【前端】CSS3新特性

      css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。   写这篇文章主

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包