css实现div内文字自动滚动

网上找了好久,终于找到了个能实现的,把它整理一下。
需求:表格内字体过长实现自动滚动
实现思路如下:
html:

<div class="item-column" style="background: rgb(12, 87, 154); width: 18%; height: 60px; line-height: 60px;"><p class="scrollDiv">让我更热个热更热个人人人歌更让人热啊隔热个人</p></div>

css:

.item-column {height: 200px;width: 300px;overflow:hidden;
}.item-column>p {white-space: nowrap; //设置不换行
}.scrollDiv {position: relative;animation: scroll 30s infinite linear; //滚动速度,值越大越慢
}@keyframes scroll {//滚动范围0% { left: 5%; }100% { left: -100%; }
}

js:

//根据class获取所有的集合,然后遍历判断实际内容长度是否大于可视区域,是的话就加上带滚动效果的classvar itemColumns = document.getElementsByClassName("item-column");for (let i = 0; i < itemColumns.length; i+

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

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

相关文章

ClickHouse安装及部署

文章目录 Docker快速安装Ubuntu预编译安装包安装检查是否支持SSE4.2使用预编译安装包 Tgz安装包配置文件修改修改密码配置远程访问 其他主机访问文章参考 Docker快速安装 本地pull镜像 docker run -d --name ch-server --ulimit nofile262144:262144 -p 9000:9000 -p 8123:81…

stm32的命令规则

stm32型号的说明&#xff1a;以STM32F103RBT6这个型号的芯片为例&#xff0c;该型号的组成为7个部分&#xff0c;其命名规则如下&#xff1a;

求助:vue从后端获取数据,如何对获得的数据进行拆分?

从后端获取数据格式如下&#xff1a; { "count": 3, "lists": [ { "id": 2, "name_id": 4, "name": "4: 2201030019: 张四", }, { …

Python网络爬虫入门到实战

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 网络爬虫&#xff08;We…

记录一个用C#实现的windows计时执行任务的服务

记录一个用C#实现的windows计时执行任务的服务 这个服务实现的功能是每天下午六点统计一次指定路径的文件夹大小 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.IO; using Syst…

基于互斥锁的生产者消费者模型

文章目录 生产者消费者 定义代码实现 / 思路完整代码执行逻辑 / 思路 局部具体分析model.ccfunc&#xff08;消费者线程&#xff09; 执行结果 生产者消费者 定义 生产者消费者模型 是一种常用的 并发编程模型 &#xff0c;用于解决多线程或多进程环境下的协作问题。该模型包含…

Flask-SocketIO和Flask-Login联合开发socketio权限系统

设置 Flask, Flask-SocketIO, Flask-Login: 首先&#xff0c;确保安装了必要的库: pip install Flask Flask-SocketIO Flask-Login基础设置: from flask import Flask, render_template, redirect, url_for, request from flask_socketio import SocketIO, emit from flask_…

unity将结构体/列表与json字符串相互转化

编写Unity程序时&#xff0c;面对大量需要传输或者保存的数据时&#xff0c;为了避免编写重复的代码&#xff0c;故采用NewtonJson插件来将定义好的结构体以及列表等转为json字符串来进行保存和传输。 具体代码如下&#xff1a; using System; using System.IO; using Newtons…

Go语言基础之切片

切片 切片&#xff08;Slice&#xff09;是一个拥有相同类型元素的可变长度的序列。它是基于数组类型做的一层封装。它非常灵活&#xff0c;支持自动扩容。 切片是一个引用类型&#xff0c;它的内部结构包含地址、长度和容量。切片一般用于快速地操作一块数据集合 切片的定义…

Redis 整合中 Redisson 的使用

大家好 , 我是苏麟 , 今天带来 Redisson 使用 . 官方文档 : GitHub - redisson/redisson: Redisson - Easy Redis Java client with features of In-Memory Data Grid. Sync/Async/RxJava/Reactive API. Over 50 Redis based Java objects and services: Set, Multimap, Sorte…

Alibaba-Easyexcel 使用总结

简介 简介 EasyExcel 是一个基于 Java 的简单、省内存的读写 Excel 的开源项目&#xff0c;在尽可能节约内存的情况下支持读写百 M 的 Excel。 但注意&#xff0c;其不支持&#xff1a; 单个文件的并发写入、读取读取图片宏 常见问题 Excel 术语 Sheet&#xff0c;工作薄…

每日一学——案例难点Windows配置

在Windows上配置DNS服务器有几个步骤&#xff1a; 步骤1&#xff1a;打开网络连接设置 在任务栏上右键单击网络图标&#xff0c;并选择“打开网络和Internet设置”。 在新窗口中&#xff0c;选择“更改适配器选项”。 在打开的窗口中&#xff0c;找到正在使用的网络适配器&a…

RNN+LSTM正弦sin信号预测 完整代码数据视频教程

视频讲解:RNN+LSTM正弦sin信号预测_哔哩哔哩_bilibili 效果演示: 数据展示: 完整代码: import torch import torch.nn as nn import torch.optim as optim import numpy as np import matplotlib.pyplot as plt import pandas as pd from sklearn.preprocessing import…

Nginx代理功能与负载均衡详解

序言 Nginx的代理功能与负载均衡功能是最常被用到的&#xff0c;关于nginx的基本语法常识与配置已在上篇文章中有说明&#xff0c;这篇就开门见山&#xff0c;先描述一些关于代理功能的配置&#xff0c;再说明负载均衡详细。 Nginx代理服务的配置说明 1、上一篇中我们在http…

angular实现全局组件

之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件&#xff0c;而这次我们将采用另一种方式来实现 1 新建公用组件&#xff1a; navbreadcrumbnavbreadcrumb.component.htmlnavbreadc…

python的安装

1.进入python官网下载安装包&#xff1a;https://www.python.org/ 2.安装 注意&#xff1a;勾选Add Python 3.8 to PATH选项&#xff0c;并且建议选择Install Now选项&#xff0c;东西多。 解释&#xff1a;这里的path是指系统路径&#xff0c;即将python.exe文件添加到系 统…

非阻塞重试与 Spring Kafka 的集成测试

如何为启用重试和死信发布的消费者的 Spring Kafka 实现编写集成测试。 Kafka 非阻塞重试 Kafka 中的非阻塞重试是通过为主主题配置重试主题来完成的。如果需要&#xff0c;还可以配置其他死信主题。如果所有重试均已用尽&#xff0c;事件将转发至 DLT。公共领域提供了大量资…

go 指针

我们知道go中除了map 切片等类型都是进行值传递的&#xff0c;也就是copy一份&#xff0c;不会修改原有数据 普通指针 package mainimport "fmt"func main() {var a int 1var ip *intip &afmt.Printf("ip: %v\n", ip)fmt.Printf("ip: %v\n&qu…

数据库SQL语句使用

-- 查询所有数据库 show databases; -- 创建数据库&#xff0c;数据库名为mydatabase create database mydatabase; -- 如果没有名为 mydatabase的数据库则创建&#xff0c;有就不创建 create database if not exists mydatabase; -- 如果没有名为 mydatabase的数据库则创建…

ffmpeg 子进程从内存读取文件、提取图片到内存

除了网络、文件io&#xff0c;由python或java或go或c等语言开启的ffmpeg子进程还支持pipe&#xff0c;可以从stdin读入数据&#xff0c;输出转化后的图像到stdout。无需编译 ffmpeg&#xff0c;直接调用 ffmpeg.exe不香么&#xff01; “从内存读”可用于边下载边转码&#xf…