当前位置: 首页 > news >正文

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.lryc.cn/news/129444.html

相关文章:

  • VuePress 数学公式支持
  • stm32控制蜂鸣器源代码(附带proteus线路图)
  • selinux
  • 使用opencv4.7.0部署yolov5
  • Python - 协程基本使用详解【demo】
  • Android MVVM架构模式,详详详细学习
  • 亿赛通电子文档安全管理系统 RCE漏洞复现
  • 星际争霸之小霸王之小蜜蜂(三)--重构模块
  • JS的解析与Js2Py使用
  • Spring Bean的生命周期总结(包含面试题)
  • SpringjDBCTemplate_spring25
  • 设计模式——桥接模式
  • 改进YOLO系列:2.添加ShuffleAttention注意力机制
  • 利用Opencv实现人像迁移
  • Lnton羚通算法算力云平台在环境配置时 OpenCV 无法显示图像是什么原因?
  • 【JavaEE进阶】MyBatis的创建及使用
  • 职业学院物联网实训室建设方案
  • 3 个 ChatGPT 插件您需要立即下载3 ChatGPT Extensions You need to Download Immediately
  • 屏蔽socket 实例化时,握手阶段报错信息WebSocket connection to ‘***‘ failed
  • 单发多框检测(SSD)【动手学深度学习】
  • “RFID与光伏板的完美融合:探索能源科技的新时代!“
  • 算法leetcode|71. 简化路径(rust重拳出击)
  • 网络技术Vlan技术STP(第一课)
  • SpringBoo t+ Vue 微人事 (十一)
  • 自动驾驶卡车量产-第一章-用户需求
  • Nginx 配置文件的完整指南 (一)
  • css3+js 画出爱心特效
  • 蔚来李斌卖手机:安卓系统,苹果售价,一年一发
  • 0008__浏览器层面缓存 Etag If-None-Match等详解
  • Idea 快捷键整理