HTML5+CSS3小实例:粘性文字的滚动效果

news2024/11/13 4:28:36

实例:粘性文字的滚动效果

技术栈:HTML+CSS

效果:

源码:

【HTML】

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>粘性文字的滚动效果</title>
  <link rel="stylesheet" href="244.css">
</head>

<body>
  <div class="marquee">
    <div class="marquee-blur">
      <p class="marquee-text">粘性文字的滚动效果</p>
    </div>
    <div class="marquee-clear">
      <p class="marquee-text">粘性文字的滚动效果</p>
    </div>
  </div>
</body>

</html>

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

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

相关文章

二叉树oj联习

判断是否为平衡二叉树 定义 oj题目 采用递归的思想 在gaodu函数中算出左子树的高度和右子树的高度 相减进行比较 再用递归遍历左右子树 依次算出每个结点的左右子树高度比较&#xff0c;只要有一个不符合条件则不为平衡二叉树 代码展示 int gaodu(struct TreeNode* a) {i…

PHP项目跨大版本升级,兼容性检测

项目中&#xff0c;经常因为各种原因&#xff0c;需要对老旧的项目进行跨大版本升级&#xff0c;比如从7.1升级到8.1 跨大版本升级会导致项目不可控&#xff0c;运行报错&#xff0c;出BUG等等问题&#xff0c;我们介绍一款工具用来解决此问题 php-compatibility检查PHP跨版本兼…

MySQL -- 锁机制

1. 表级锁和行级锁 表级锁&#xff08;Table-level Lock&#xff09; 表级锁是对整张表进行锁定&#xff0c;通常用于需要修改大量数据的操作。表级锁的优点是开销小&#xff0c;锁定快&#xff0c;但缺点是并发性能较差&#xff0c;因为一个表一旦被锁定&#xff0c;其他事务…

从0到100:找搭子小程序开发笔记(一)

背景调查 “找搭子”小程序&#xff1a;能够解决人们在社交、休闲和约会方面的需求&#xff0c;提供方便快捷的方式来找到合适的伴侣或活动伙伴。许多人在社交场合中感到焦虑或不安&#xff0c;因此他们更倾向于使用在线平台来认识新的朋友或搭子。有些人可能生活在一个较小或…

鸿蒙开发:应用组件跨设备交互(流转)【跨端迁移】

跨端迁移 概述 在用户使用设备的过程中&#xff0c;当使用情境发生变化时&#xff08;例如从室内走到户外或者周围有更适合的设备等&#xff09;&#xff0c;之前使用的设备可能已经不适合继续当前的任务&#xff0c;此时&#xff0c;用户可以选择新的设备来继续当前的任务&a…

刷代码随想录有感(100):动态规划——不同路径

题干&#xff1a; 代码&#xff1a; class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>>dp(m,vector<int>(n, 0));for(int i 0; i < m; i) dp[i][0] 1;for(int j 0; j < n; j) dp[0][j] 1;for(int i 1; i < m; i){…

程序员日志之DNF手游6月5日罗特斯入门团本

目录 传送门正文日志1、概要1、散件装备过渡2、世界领主攻略和爬塔攻略3、团本攻略4、DNF剧情收集5、新版本预告6、合成冥域天空套&#xff08;天一&#xff09;7、额外重磅消息 传送门 SpringMVC的源码解析&#xff08;精品&#xff09; Spring6的源码解析&#xff08;精品&a…

UE4_后期_ben_模糊和锐化滤镜

学习笔记&#xff0c;不喜勿喷&#xff0c;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 本篇教程主要介绍后期处理的简单模糊和锐化滤镜效果&#xff0c;学习之前首先要回顾下上节课介绍的屏幕扭曲效果&#xff1a; 这是全屏效果&#xff0c;然后又介绍了几种蒙版&#…

Java操作数据库 —— JDBC ① 基础篇

我走我的路&#xff0c;有人拦也走&#xff0c;没人陪也走 —— 24.6.7 JDBC JDBC就是使用Java语言操作关系型数据库的一套API 一、JDBC简介 JDBC 概念 JDBC 就是使用Java语言操作关系型数据库的一套API 全称:(Java DataBase Connectivity)意为Java 数据库连接 JDBC 本质: ①…

OCP前景咋样,工资高吗?

Oracle数据库作为企业级应用的基石&#xff0c;其专业人才一直是市场上的热门需求。 OCP认证&#xff0c;作为Oracle公司颁发的专业证书&#xff0c;OCP认证的持有者通常被视为具备了高级数据库管理、配置、备份、恢复、调优以及SQL编程等关键技能的专业人士。 这些技能在当今…

python生成excel数据并实现隔行变色

代码 from openpyxl import Workbook from datetime import date from openpyxl.styles import PatternFilldef create_excel():wb Workbook()sh wb.activerows [[Date, Batch 1, Batch 2, Batch 3],[date(2024, 2, 1), 40, 30, 25],[date(2024, 2, 2), 40, 25, 30],[date(…

如何低成本、高效搭建线上3D艺术展?

随着数字技术的日新月异&#xff0c;艺术展览领域正迎来一场革新。未来的艺术展览将不再是单一的线下体验&#xff0c;而是线上线下相互融合&#xff0c;其中&#xff0c;3D线上展览将成为线下展览的重要延伸与拓展&#xff0c;为广大观众提供更多元化的选择。 对于艺术家和策…

单机多卡分布式训练策略——MirroredStrategy

前言 分布式训练是一种用于在多个设备或机器上同时训练深度学习模型的技术&#xff0c;它有助于减少训练时间&#xff0c;允许使用更多数据更快训练大模型。分布式训练重点关注数据并行性&#xff0c;本次试验使用的是单机多卡的分布式训练策略&#xff0c;也就是 MirroredStr…

2023 hnust 湖科大 嵌入式 实验报告+代码及复习资料等

2023 hnust 湖科大 嵌入式 实验报告代码及复习资料等 目录 流水灯 1 8位数码管动态扫描 3 按键输入 5 温度与关照 7 看门狗 9 内容 报告 代码 下载链接 https://pan.baidu.com/s/1LIN8rm42yrukXliI3XyZ1g?pwd1111

iOS——KVO底层学习

前情回顾 什么是KVO&#xff1f;在之前的博客里我们已经学过&#xff1a; KVO全称Key Value Observing。KVO传值允许对象监听另一个对象的特定属性&#xff0c;当该属性改变的时候&#xff0c;会触发事件。 KVO不仅可以监听单个属性的变化&#xff0c;也可以监听集合对象的变…

进口电动温度调节阀的原理-美国品牌

进口电动温度调节阀的原理可以清晰地分为以下几个部分进行描述&#xff1a; 1. 温度感应与信号转换 温度传感器&#xff1a;负责感应介质&#xff08;如液体、气体等&#xff09;的温度&#xff0c;并将其转化为相应的电信号。这个电信号反映了介质当前的实际温度。 2. 信号…

数据结构——bitset(位图)模拟实现

从一个题目引出位图 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中&#xff1f; 这里有两种大家容易想到的解法&#xff1a; 1.遍历搜索&#xff0c;时间复杂度为O(N) 2.先排序&#xff08;O(NlogN)&a…

【DBA早下班系列】—— 并行SQL/慢SQL 问题该如何高效收集诊断信息

1. 前言 OceanBase论坛问答区或者提交工单支持的时候大部分时间都浪费在了诊断信息的获取交互上&#xff0c;今天我就其中大家比较头疼的SQL问题&#xff0c;给大家讲解一下如何一键收集并行SQL/慢SQL所需要的诊断信息&#xff0c;减少沟通成本&#xff0c;让大家早下班。 2. …

Linux安装——初入linux

前言&#xff1a;linux是雷纳斯托瓦斯在1991年接触到学校机房的装配unix操作系统的电脑后&#xff0c; 立志并且力行大学四年创建出来的操作系统。 在大佬创建linux后就将它的源代码公开——开源。 同时&#xff0c; 大佬给linux取得全名是&#xff1a; Linux is not unix。lin…

使用 python 将 Markdown 文件转换为 ppt演示文稿

在这篇博客中&#xff0c;我们将展示如何使用 wxPython 创建一个简单的图形用户界面 (GUI)&#xff0c;以将 Markdown 文件转换为 PowerPoint 演示文稿。我们将利用 markdown2 模块将 Markdown 转换为 HTML&#xff0c;并使用 python-pptx 模块将 HTML 内容转换为 PowerPoint 幻…