css3横向无限公告消息滚动功能

news/2024/11/26 4:14:33/

在这里插入图片描述
在这里插入图片描述

css部分
在这里插入图片描述
.container {
display: flex;
/* 父容器需要有明确的高度 /
// height: 150px;
width: 2100rpx;
margin: auto;
overflow: hidden;
position: absolute;
top: 20%;
left: 0;
animation: scroll 8s linear infinite normal;
}
.container > .scroll-list {
display: flex;
flex-wrap: wrap;
width: 1050rpx;
.textname{
display: inline-block;
background-color: rgba(0,0,0,0.4);
color: #fff;
font-size: 26rpx;
padding: 5rpx 20rpx;
border-radius: 50rpx;
margin-left: 20rpx;
margin-bottom: 30rpx;
}
}
@keyframes scroll {
100% {
/
需要滚动内容的总高度 */
left: -1050rpx;
}
}

在这里插入图片描述


http://www.ppmy.cn/news/31436.html

相关文章

python的django框架从入门到熟练【保姆式教学】第二篇

在上一篇博客中,我们介绍了Django的基础知识,并创建了一个简单的Web应用程序。在本篇教程中,我们将深入探讨Django的模型层(Model),它是Django应用程序的核心组件之一。 模型层 Django的模型层是一个对象…

Oracle 实现对全局错误语句的审计监控 ORA- alert

--将所有数据库ora-错误写入表create table error_tab (username varchar2(4000), d_current_nr_error varchar2(4000), ora_server_error_msg varchar2(4000), full_text varchar2(4000),errdate date);create or replace trigger error_triggerafter servererror on database…

04从零开始学Java之可能是最详细的Java环境配置教程

作者:孙玉昌,昵称【一一哥】,另外【壹壹哥】也是我哦CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者前言在上一篇文章中,壹哥给大家重点讲解了Java实现跨平台的原理,不知道你现在有没有弄清楚呢?如…

ASP.NETCore学习资料

1.ASP.NETCore比ASP.NET更具优势的地方是什么? ASP.NET Core(ASP.NET Core 简介) ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET(ASP.NET 简介) ASP.NET 是一个成熟的框架,提…

react+antdpro+ts实现企业级项目四:注册页面实现及useEmotionCss的介绍

创建文件路径并注册register路由 在pages/User下创建Register文件夹并创建index.tsx文件 然后在config/routes创建register注册路由。注册完后,当在登陆页面点击注册按钮时就可以跳转到此注册页面而不会报404了。 export default [{path: /user,layout: false,rou…

【Java】SpringBoot中实现异步编程

前言 首先我们来看看在Spring中为什么要使用异步编程,它能解决什么问题? 什么是异步? 首先我们先来看看一个同步的用户注册例子,流程如下: 异步的方式如下: 在用户注册后将成功结果返回,…

[学习笔记] 3. 算法进阶

算法进阶视频地址:https://www.bilibili.com/video/BV1uA411N7c5 1. 贪心算法 贪心算法(又称贪婪算法),是指在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑 —— 所做…

学生信息管理系统--课后程序(Python程序开发案例教程-黑马程序员编著-第6章-课后作业)

实例2:学生信息管理系统 学生信息管理系统是用于管理学生信息的管理软件,它具备学生信息的查找、修改、增加和删除功能,利用该系统可实现学生信息管理的电子化,提高信息管理效率。 本实例要求编写程序,实现学生信息管…