CSS实现文字上下滚动、间歇滚动和无限滚动

news2024/11/24 7:58:55

目录

  • 1、连续滚动
  • 2、间歇性向上滚动
  • 3、任意个数向上滚动

本文主要记录了如何实现文字上下滚动效果,实现主要就是用到了css3的两个属性: @framekeysanimation

1、连续滚动

请添加图片描述

<div class="scroll-continuous">
	<div class="content">
	     <div class="item">1-12345dfgdfgdg6</div>
	     <div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
	     <div class="item">3-aksfhaksfkasfh</div>
	     <div class="item">4-撒发顺丰大叔大叔大叔的</div>
	     <div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
 	</div>
</div>

<style>
.scroll-continuous {
  position: relative;
  width: 250px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #4d0074;
}
@keyframes rowup {
   0% {
     transform: translateY(0);
   }
   25% {
     transform: translateY(-20px);
   }
   50% {
     transform: translateY(-40px);
   }
   75% {
     transform: translateY(-60px);
   }
   100% {
     transform: translateY(-80px);
   }
 }
.content {
   width: 100%;
   height: 100%;
   padding: 10px 0;
   animation: 10s rowup linear infinite normal;
 }
 .item {
   height: 20px;
   line-height: 20px;
   padding-left: 5px;
   color: #4d0074;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   white-space: nowrap;
 }
</style>

2、间歇性向上滚动

请添加图片描述
实现其实和连续滚动原理差不多,只不过加上了停留的动画贞配置。

<div class="scroll-intermittent">
	<div class="content">
		<div class="item">1-12345dfgdfgdg6</div>
		<div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
		<div class="item">3-aksfhaksfkasfh</div>
		<div class="item">4-撒发顺丰大叔大叔大叔的</div>
		<div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
	</div>
</div>

<style>
.scroll-intermittent {
  width: 250px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #4d0074;
}

@keyframes moveup {
  0% {
    transform: translateY(0px);
  }
  19% {
    transform: translateY(0px);
  }
  /* 两贞使用相同的偏移,达成停下展示效果,展示时长=两贞百分比差x总动画时差,即:19%x10s=1.9s */
  20% {
    transform: translateY(-20px);
  }
  39% {
    transform: translateY(-20px);
  }
  40% {
    transform: translateY(-40px);
  }
  59% {
    transform: translateY(-40px);
  }
  60% {
    transform: translateY(-60px);
  }
  79% {
    transform: translateY(-60px);
  }
  80% {
    transform: translateY(-80px);
  }
  99% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(-100px);
  }
}
.content {
  animation: 10s moveup linear infinite normal;
}
.item {
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  color: #4d0074;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>

3、任意个数向上滚动

在上述实现的间歇性滚动中,有一个限制就是滚动的条数是有限制的,比较从样式表的配置就可以看到写法比较固定,如果要实现任意个数翻滚,那么就需要借助js进行动态修改animation.
请添加图片描述
基于vue3实现如下:

<template>
  <div class="scroll-wrap">
    <div class="content" ref="contentRef">
      <div v-for="item in scrollList" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const scrollList = [
  { text: "1-12345dfgdfgdg6", id: 1 },
  { text: "2-阿萨达dfgdfgdfgdfgdfgdfg", id: 2 },
  { text: "3-aksfhaksfkasfh", id: 3 },
  { text: "4-撒发顺丰大叔大叔大叔的", id: 4 },
  { text: "5- 撒打算大的撒十大啊大大撒是的啊大叔的a s s d", id: 5 },
  { text: "6-aksfhk但是非是的发送到发送地方ashfkasfh", id: 6 },
  { text: "7-akssfhk都非对方是的发送到发送地方ashfkasfh", id: 7 },
  { text: "8-aksfsfh的发送到发送到发送kashfkasfh", id: 8 },
  { text: "9-aksksfhk史蒂夫是的是的d sashfkasfh", id: 9 },
  { text: "10-aksfhka啊大撒打算大是的shfkasfh", id: 10 },
];

const contentRef = ref();

// 动态计算animation
function calcAnimation(totalFrames = 10, stepDistance = 20) {
  const totalFrames = scrollList.length; // 滚动内容的数量
  const stepDistance = 20; // 滚动的距离,须和滚动项高度保持一致,例如:style中的.item的height:20px,所以此处默认给了值为20
  const duration = `${totalFrames * 2}s`; // 总滚动时间
  let keyframeItems = "";
  for (let i = 0; i <= totalFrames; i++) {
    const percent = Math.floor(i * (100 / totalFrames));
    const offset = -(i * stepDistance);
    if ((percent !== 0 && percent !== 100) || i === totalFrames) {
      keyframeItems += `${percent - 1}% { transform: translateY(${
        i === 1 ? 0 : offset + 20
      }px)}\n`;
    }
    keyframeItems += `${percent}% { transform: translateY(${offset}px); }\n`;
  }
  // 注意:动态修改vue样式的animation,要先通过insertRule()添加对应的@keyframes
  document.styleSheets[0].insertRule(`@keyframes moveup {${keyframeItems}}`, 0);
  contentRef.value.style.animation = `moveup ${duration} linear infinite normal`;
}

onMounted(() => {
  calcAnimation();
});
</script>

<style scoped>
.scroll-wrap {
  position: relative;
  width: 250px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #4d0074;
}
.item {
  height: 20px;
  padding-left: 5px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #4d0074;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1840069.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【玩儿】TX应用宝模拟器安装第三方APK

TX应用宝模拟器安装第三方APK 前言应用宝下载安装三方APK安装审核应用安装自研应用安装执行 adb 命令创建应用快捷方式 前言 腾讯应用开放平台公布了应用宝电脑版的产品详情&#xff0c;应用宝电脑版支持从PC桌面直接打开安卓应用&#xff0c;无需感知应用市场打开界面&#x…

【教学类-64-04】20240619彩色鱼骨图(一)6.5*1CM 6根棒子720种

背景需求&#xff1a; 幼儿益智早教玩具❗️鱼骨拼图 - 小红书在家也能自制的木棒鱼骨拼图&#xff0c;你也收藏起来试一试吧。 #母婴育儿 #新手爸妈 #玩具 #宝宝玩具怎么选 #早教 #早教玩具 #幼儿早教 #益智早教 #玩具 #宝宝早教 #益智拼图 #宝宝拼图 #玩不腻的益智玩具 #儿童…

第四篇:精通Docker构建:Dockerfile的艺术与策略

精通Docker构建&#xff1a;Dockerfile的艺术与策略 1. 开篇&#xff1a;探索Docker的革命 在探讨我们的主题之前&#xff0c;让我们先回顾一下Docker的概念。Docker是一个开源平台&#xff0c;用于自动化应用程序的部署、扩展和管理&#xff0c;这一切都是在轻量级的容器中进…

keil5显示内存和存储占用百分比进度条工具

简介 [Keil5_disp_size_bar] 以进度条百分比来显示keil编译后生成的固件对芯片的内存ram和存储flash的占用情况, 并生成各个源码文件对ram和flash的占比整合排序后的map信息的表格和饼图。 原理是使用C语言遍历当前目录找到keil工程和编译后生成的map文件 然后读取工程文件和m…

[16] 使用Opencv_CUDA 实现访问图像像素、直方图均衡化、几何变换

使用Opencv_CUDA 实现访问图像像素、直方图均衡化、几何变换 访问图像的各个像素强度直方图的计算与均衡几何变换&#xff1a;缩放、平移与旋转 1. 访问图像的各个像素强度 #include <iostream> #include "opencv2/opencv.hpp"int main() {cv::Mat h_img1 …

调取Windows系统虚拟键盘

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 using System.Diagnostics;namespace 调取Windows虚拟键盘 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void richTextBox1_DoubleClick(object sender, EventArgs e){Proces…

对于补码的个人理解

1. 十进制的取模计算 现在我想要使另一个数加上2后用8取模后也等于1&#xff0c;这个数可以是哪些&#xff1f; 这个问题比较简单&#xff0c;只需要-1加上8的倍数即可 例如&#xff1a; 如果我们想要得到距离-1这个负数最近的一个正数7&#xff0c;直接使用-18即可。反过来想…

JavaSE 面向对象程序设计高级 方法引用 2024详解

在编程中&#xff0c;方法引用&#xff08;Method Reference&#xff09;是一种技术&#xff0c;它让你能够直接引用一个现有的函数或方法&#xff0c;而无需通过对象实例来调用。这种方法在函数式编程和高阶函数中非常有用&#xff0c;因为它提供了简洁的方式来传递函数行为&a…

晋升受阻或遭受不公:你想到这条路了吗?

晋升受阻或遭受不公&#xff1a;你想到这条路了吗&#xff1f; 当你在职场上遇到晋升受阻或者感觉受到不公平对待的时候&#xff0c;你一般选择怎么处理&#xff1f;是逆来顺受、忍气吞声、还是听命安排与据理力争&#xff1f; 其实并非无路可走&#xff0c;这时候&#xff0c;…

在二维空间中用椭圆表示不确定性

在二维空间中用椭圆表示不确定性 flyfish import numpy as np import matplotlib.pyplot as plt from matplotlib.patches import Ellipse# 生成示例数据 np.random.seed(0) data np.random.multivariate_normal([0, 0], [[4, 2], [2, 3]], size500)# 计算均值和协方差矩阵 …

使用node把任意网站封装为可执行文件

直接上步骤&#xff1a; 1. node.js 环境准备 下载地址 那个版本都行&#xff0c;下一步->下一步 安装即可 2. windows 系统下&#xff0c; 快捷键 winr ->输入 cmd -> 回车 3. 执行第一个命令&#xff0c;安装 nativefier 等一段时间 npm install nativefier -g 4…

GitHub爆赞!最适合新手入门的教程——笨方法学Python 3

“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍&#xff0c;但需要注意的是&#xff0c;正因为它既好学又好用&#xff0c;所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程&…

VMware 虚拟机共享宿主机文件夹

一、背景 在虚拟机中&#xff0c;需要写文件到宿主机的文件系统中 宿主机的文件共享给虚拟机使用 这些场景就涉及到VM的虚拟机怎么访问宿主机的磁盘文件夹 二、软件背景 宿主机&#xff1a;window机器&#xff0c;本文是win7 虚拟软件&#xff1a;VMware12.5.6&#xff0…

js文件导出功能

效果图&#xff1a; 代码示例&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>html 表格导出道</title><script src"js/jquery-3.6.3.js"></script><st…

Office--加载宏-CS上线

免责声明:本文仅做技术交流与学习... 目录 关于宏上线的格式: 操作流程: 其他office文本的上线格式一样: 关于宏上线的格式: doc宏病毒: 1-生成格式为dotm 只要点启用宏就上线 2-生成格式为()word 97-2003 .doc) 被杀 操作流…

Qt入门小项目 | 实现一个图片查看器

文章目录 一、实现一个图片查看软件 一、实现一个图片查看软件 需要实现的功能&#xff1a; 打开目录选择图片显示图片的名字显示图片 在以上功能的基础上进行优化&#xff0c;需要解决如下问题&#xff1a; 如何记住上次打开的路径&#xff1f; 将路径保存到配置文件中&#x…

LabVIEW在SpaceX的应用

结合真实的资料介绍LabVIEW在SpaceX的应用&#xff0c;涵盖自动化测试系统、数据采集与监控、可视化与分析、模块化设计与扩展&#xff0c;以及效率与可靠性的提高。 ​ 自动化测试系统 LabVIEW在SpaceX的自动化测试系统中发挥了关键作用。自动化测试是确保SpaceX火箭及其子系…

Android焦点机制结合WMS

文章前提&#xff1a; 了解WMS基本作用了解window的概念&#xff0c;phoneWindow&#xff0c;rootViewImpl了解view的事件分发 开始&#xff1a; 讲三件事情&#xff1a; window的创建&#xff0c;更新焦点的更新事件的分发 Window的创建&#xff0c;更新&#xff1a; wi…

IT入门知识第二部分《编程语言》(2/10)

目录 IT入门知识博客文章大纲第二部分《编程语言》 1.引言 2.编程语言概述 2.1 编程语言的发展历程 2.2 编程范式 3.常见的编程语言 3.1 Python 3.2 Java 3.3 C 3.4 JavaScript 3.5 Ruby 4.编程语言的选择 4.1 技术需求 4.2 团队技能 4.3 社区和生态系统 4.4 可…

经验分享,CRC(循环冗余校验)在线计算

这里分享一个好用的在线计算CRC的网站。 网址&#xff1a;http://www.ip33.com/crc.html 截图&#xff1a;