css 实现文字横向循环滚动

实现效果

在这里插入图片描述

思路

在这里插入图片描述## 直接上代码,html部分

//我这里是用的uniapp
<view class="weather_info_wrap"><view class="weather_info">当前多云,今晚8点转晴,明天有雨,温度32摄氏度。</view><view class="weather_info">当前多云,今晚8点转晴,明天有雨,温度32摄氏度。</view>
</view>

css部分

.weather_info_wrap {width: 90%;overflow: hidden;white-space: nowrap;font-size: 24rpx;display: flex;}.weather_info {animation: 5s wordsLoop linear infinite normal;}@keyframes wordsLoop {0% {transform: translateX(0);-webkit-transform: translateX(0);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}}@-webkit-keyframes wordsLoop {0% {transform: translateX(0);-webkit-transform: translateX(0);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}}

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

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

相关文章

解决IDEA tomcat控制台只有server日志

解决IDEA tomcat控制台只有server日志 确认tomcatxxx/conf/logging.properties文件是否存在&#xff0c;存在就会有。前提是在run configuration配置了打印多个日志

uniapp封装组件,选中后右上角显示对号√样式(通过css实现)

效果&#xff1a; 一、组件封装 1、在项目根目录下创建components文件夹&#xff0c;自定义组件名称&#xff0c;我定义的是xc-button 2、封装组件代码 <template><view class"handle-btn"><view :class"handleIdCode 1 ? select : unSelec…

【电商领域】Axure在线购物商城小程序原型图,品牌自营垂直电商APP原型

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;网上商城、品牌自营商城、商城模块插件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为品牌自营网上商城…

无涯教程-Perl - warn函数

描述 此函数将LIST的值打印到STDERR。基本上与die函数相同,除了不对出口进行任何调用并且在eval语句内不引发异常。这对于引发错误而不导致脚本过早终止很有用。 如果变量$包含一个值(来自先前的eval调用),并且LIST为空,则$的值将以。\t.caught打印。附加到末尾。如果$和LIST…

MySQL数据库概述

MySQL数据库概述 1 SQL SQL语句大小写不敏感。 SQL语句末尾应该使用分号结束。 1.1 SQL语句及相关操作示例 DDL&#xff1a;数据定义语言&#xff0c;负责数据库定义、数据库对象定义&#xff0c;由CREATE、ALTER与DROP三个语法所组成DML&#xff1a;数据操作语言&#xff…

关于小程序收集用户手机号行为的规范

手机号在日常生活中被广泛使用&#xff0c;是重要的用户个人信息&#xff0c;小程序开发者应在用户明确同意的前提下&#xff0c;依法合规地处理用户的手机号信息。 而部分开发者在处理用户手机号过程中&#xff0c;存在不规范收集行为&#xff0c;影响了用户的正常使用体验&a…

k8s简介、虚拟机快速搭建k8s集群、集群管理方式及K8S工作原理和组件介绍

文章目录 1、k8s简介1.1、部署方式的变迁1.2、定义1.3、Kubernetes提供的功能 2、虚拟机快速搭建k8s集群2.1、虚拟机配置&#xff08;centos7 2G内存2个处理器&#xff09;2.2、基础环境准备2.3、docker安装&#xff08;易踩坑&#xff09;2.4、安装k8s组件2.5、master节点部署…

提高批量爬虫工作效率

大家好&#xff01;作为一名专业的爬虫程序员&#xff0c;我今天要和大家分享一些关于提高批量爬虫工作效率的实用技巧。无论你是要批量采集图片、文本还是视频数据&#xff0c;这些经验都能帮助你在大规模数据采集中事半功倍。废话不多说&#xff0c;让我们开始吧&#xff01;…

SUMO 创建带有停车位的充电站 在停车位上充电

前言 SUMO提供的Charging Station是没有停车位的&#xff0c;车辆只有在通过充电站区域或者停在充电站区域内时才能被充电&#xff0c;这时充电的车辆就会占用道路。然而&#xff0c;真实世界中的情况通常是充电站设在路边&#xff0c;且提供一定量的车位用于停车&#xff0c;…

半导体自动化专用静电消除器主要由哪些部分组成

半导体自动化专用静电消除器是一种用于消除半导体生产过程中的静电问题的设备。由于半导体制造过程中对静电的敏感性&#xff0c;静电可能会对半导体器件的质量和可靠性产生很大的影响&#xff0c;甚至造成元件损坏。因此&#xff0c;半导体生产中采用专用的静电消除器是非常重…

Linux Day09

目录 一、进程替换 二、Linux信号的使用 2.1 kill() 发送信号 2.2 signal() 改变进程对信号的响应方式 2.3 处理僵死进程 2.3.1 在信号处理函数中调用wait 2.3.2 Linux特有的 2.3.3 结果 一、进程替换 linux上创造一个新进程&#xff0c;没有create创建方法&#xf…

数据分析15——office中的Excel基础技术汇总

0、前言&#xff1a; 这部分总结就是总结每个基础技术的定义&#xff0c;在了解基础技术名称和定义后&#xff0c;方便对相关技术进行检索学习。笔记不会详细到所有操作都说明&#xff0c;但会把基础操作的名称及作用说明&#xff0c;可自行检索。本文对于大部分读者有以下作用…

优化视频流:利用美颜SDK提升直播质量的方法

随着互联网的迅猛发展&#xff0c;视频直播已成为人们分享、交流和娱乐的重要方式。然而&#xff0c;在实际的直播过程中&#xff0c;视频画质可能受到诸多因素的影响&#xff0c;例如摄像头品质、网络状况等。为了提升观众的体验和吸引更多的观众&#xff0c;美颜技术逐渐成为…

Git分享-规范/建议/技巧

1. Git多人协作开发流程图 1.1 processOn默认的模板 1.2 改造之后 https://www.processon.com/view/link/64ccaf56a433c931b2f9428a 访问密码&#xff1a;512I ① 总流程图 ② feat分支&#xff08;功能/需求 分支&#xff09;流程 ③ bugfix分支&#xff08;紧急补丁分支&…

Qt平滑弹出页面

目标功能&#xff1a; (1)按下btn&#xff0c;弹出绿色页面。 (2)按下btn2,绿色页面隐藏。 (3)按下左边余下的区域&#xff0c;绿色页面也隐藏。 (4)平滑地显示和隐藏 效果&#xff1a; form.h #ifndef FORM_H #define FORM_H#include <QWidget>namespace Ui { class…

上半年营收19亿,金融壹账通第二增长曲线“加速上坡”

8月16日&#xff0c;壹账通金融科技有限公司&#xff08;下称“金融壹账通”&#xff09;发布了截至2023年6月30日中期业绩报告。 根据财报&#xff0c;2023年上半年&#xff0c;金融壹账通实现营收18.99亿元&#xff0c;毛利润为6.96亿元&#xff1b;归母净利润率从-26.1%提升…

卷积神经网络全解!CNN结构、训练与优化全维度介绍!

目录 一、引言1.1 背景和重要性1.2 卷积神经网络概述 二、卷积神经网络层介绍2.1 卷积操作卷积核与特征映射卷积核大小多通道卷积 步长与填充步长填充 空洞卷积&#xff08;Dilated Convolution&#xff09;分组卷积&#xff08;Grouped Convolution&#xff09; 2.2 激活函数R…

相机的位姿在地固坐标系ECEF和ENU坐标系的转换

在地球科学和导航领域&#xff0c;通常使用地心地固坐标系&#xff08;ECEF&#xff0c;Earth-Centered, Earth-Fixed&#xff09;和东北天坐标系&#xff08;ENU&#xff0c;East-North-Up&#xff09;来描述地球上的位置和姿态。如下图所示&#xff1a; ​地心地固坐标ecef和…

EV PV AC SPI CPI TCPI

SPI EV / PV CPI EV / ACCPI 1.25 SPI 0.8 PV 10 000 BAC 100 000EV PV * SPI 10 000 * 0.8 8000 AC EV / CPI 8000 / 1.25 6400TCPI (BAC - EV) / (BAC -AC) (100 000 - 8 000) / (100 000 - 6 400) 92 000 / 93 600 0.98290598

SCSS 学习笔记 和 vscode下载live sass compiler插件配置

1、下载livelive sass compiler插件并配置 // 在 已有代码 下面 添加下面 代码&#xff0c;一般刚刚下载打开最后一行是&#xff1a;// "liveSassCompile.settings.autoprefix": [],// 所以直接 把下面复制进去保存就行"liveSassCompile.settings.autoprefix&qu…