前端常用js、css效果
前端常用js效果
- 效果
- 参考代码
- 文本横向滚动
- 文本无限滚动
- 无缝轮播
- 无缝滚动
- 盒子上下移动
- 樱花飘落
效果
主要整理了几个常用的，方便平时做项目的时候参考
文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下滚动
樱花飘落效果
参考代码
文本横向滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>横向滚动文字</title>
</head><body><div class="scroll-container"><div class="scroll-content"><p>这是要滚动的文本内容。</p></div></div><style>.scroll-container {width: 300px;height: 30px;margin: 20px auto;border: 1px solid gray;display: flex;align-items: center;overflow: hidden;white-space: nowrap;}.scroll-content {display: inline-block;animation: scroll 10s linear infinite;/* 调整滚动速度，单位为秒 */}@keyframes scroll {from {transform: translateX(100%);}to {transform: translateX(-100%);}}</style>
</body></html>
文本无限滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><div class="list"><div>1.这是一段文字</div><div>2.这是一段文字</div><div>3.这是一段文字</div><div>4.这是一段文字</div><div>5.这是一段文字</div><div>6.这是一段文字</div><div>7.这是一段文字</div><div>8.这是一段文字</div></div></div><style>.box {margin: 20px auto;width: 300px;height: 160px;overflow: hidden;position: relative;border: 1px solid gray;}.list {position: absolute;top: 0;display: flex;flex-direction: column;align-items: center;}.list>div {width: 300px;height: 20px;box-sizing: border-box;}</style><script>let list = document.querySelector(".list");let box = document.querySelector(".box");list.innerHTML += list.innerHTML;let currentTop = 0;let timer;const move = () => {timer = setInterval(() => {currentTop -= 2;if (currentTop == -(6 * 20)) {currentTop = 0}list.style.top = currentTop + 'px'}, 20)}move()box.onmouseenter = () => {clearInterval(timer)}box.onmouseleave = () => {move()}</script>
</body></html>
无缝轮播
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><div class="list"><div>1</div><div>2</div><div>3</div><div>4</div></div></div><style>.box {width: 320px;height: 80px;overflow: hidden;position: relative;border: 1px solid gray;margin: 20px auto;}.list {position: absolute;left: 0;display: flex;align-items: center;transition: left 0.5s ease; /* Added transition property */}.list>div {width: 80px;height: 80px;border: 1px solid gray;box-sizing: border-box;}</style><script>let list = document.querySelector(".list");list.innerHTML += list.innerHTML;let left = 0;setInterval(() => {left -= 80;if (left === -(5 * 80)) {list.style.transition = "none"; // Remove transitionleft = 0;setTimeout(() => {list.style.transition = "left 0.5s ease"; // Restore transition after a short delay}, 0);}list.style.left = left + "px";}, 2000);</script>
</body></html>无缝滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><div class="list"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></div><style>.box {margin: 20px auto;width: 300px;height: 80px;overflow: hidden;position: relative;border: 1px solid gray;}.list {position: absolute;left: 0;display: flex;align-items: center;}.list>div {width: 80px;height: 80px;border: 1px solid gray;box-sizing: border-box;}</style><script>let list = document.querySelector(".list");let box = document.querySelector(".box");list.innerHTML += list.innerHTML;let left = 0;let timer;const move = () => {timer = setInterval(() => {left -= 2;if (left == -(6 * 80)) {left = 0}list.style.left = left + 'px'}, 20)}move()box.onmouseenter = () => {clearInterval(timer)}box.onmouseleave = () => {move()}</script>
</body></html>
盒子上下移动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><div class="box1"></div></div><style>.box {width: 200px;height: 200px;border: 1px solid gray;margin: 0 auto;position: relative;}.box1 {width: 50px;height: 50px;background: skyblue;position: absolute;top: 0;left: 50%;transform: translateX(-50%);transition: top 1s ease-in-out;}</style></body>
<script>document.addEventListener("DOMContentLoaded", function () {let box = document.querySelector(".box")let box1 = document.querySelector(".box1")setInterval(() => {let currentTop = parseInt(window.getComputedStyle(box1).top);let newTop = (currentTop == 0) ? box.clientHeight - box1.clientHeight : 0;box1.style.top = newTop + 'px';}, 1000)})
</script></html>
樱花飘落
添加插件sakura.js就可以了，不用什么代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><body><script src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@2.0/js/sakura.js"></script></body>
</body></html>
相关文章：
前端常用js、css效果
前端常用js效果 效果参考代码文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下移动樱花飘落 效果 主要整理了几个常用的，方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 <!DOCTYP…...
Modern C++ 条件变量
今天无意中看到一篇帖子，关于条件变量的，不过仔细看看发现它并达不到原本的目的。 程序如下，读者可以先想想他的本意，以及有没有问题： #include <iostream> #include <thread> #include <condition_v…...
免费chartGPT网站汇总--
https://s.suolj.com - （支持文心、科大讯飞、智谱等国内大语言模型，Midjourney绘画、语音对讲、聊天插件）国内可以直连，响应速度很快 很稳定 https://seboai.github.io - 国内可以直连，响应速度很快 很稳定 http://gp…...
关于C#中的async/await的理解
1. 使用async标记的方法被认为是一个异步方法，如果不使用await关键字，调用跟普通方法没有区别 static async Task Main(string[] args){Console.WriteLine("主线程id：" Thread.CurrentThread.ManagedThreadId);TestAwait();Consol…...
docker硬件交互 _ROS2
docker硬件交互 _ROS2 将自己需要挂载的设备接到主板上，在宿主机中建立udev规则（/etc/udev/rules.d/）然后在开启容器时，将设置了规则的devices 通过 --device/dev/myserial --device/dev/rplidar 等 参数挂载到docker容器中 doc…...
JS的数据类型和运算符
typeof()方法：检测数据类型 JS中的基本数据类型 基本数据类型 1.number 数字 2.string 字符串 3.boolean 布尔 4.null 代表空值（typeof方法检测出来的数据类型是object类型） 5.underfined 未定义；变量已声明但是未赋值 6.…...
CSS实现平行四边形
1、为什么实现平行四边形 在日常开发过程中，有些时候我们可以会遇到一种情况，如可视化大屏中要求我们横线实现对应的进度条，但进度条的内容是由无数个平行四边形组装类似于进度条的形式，那么我们就需要使用CSS来进行对应的实现。 …...
第11章 GUI Page500~504 步骤三十二：打开画板文件02
各个图元类新增GetTypeName_Static()，并将原来的GetTypeName()改为调用静态方法实现： 直线： 圆： 十字： 矩形： 文字： tool_4_save_load.hpp添加两行 tool_4_save_load.cpp增加： 增加…...
【ROS2】ROS2使用C++实现简单服务端
使用ROS2实现简单的服务端，功能为将客户端提供的两个数相加后返回给客户端。 代码如下： #include "rclcpp/rclcpp.hpp" #include "std_msgs/msg/string.hpp" #include "base_interfaces_demo/msg/student.hpp" #include "base_interfac…...
WAF攻防相关知识点总结1--信息收集中的WAF触发及解决方案
什么是WAF WAF可以通过对Web应用程序的流量进行过滤和监控，识别并阻止潜在的安全威胁。WAF可以检测Web应用程序中的各种攻击，例如SQL注入、跨站点脚本攻击（XSS）、跨站请求伪造（CSRF）等，并采取相…...
行云部署前端架构解析-前言 | 京东云技术团队
一个简单的自我介绍 项目规模 截止目前上万次代码提交，总代码行数1超过21万行，其中人工维护的代码超过 13万行，近千个文件。 前端线上服务直接对接的后端服务，达十多个。 跟很多应用一样, 它有行云的入口, 也有独立的服务, 还…...
git提交代码到远端仓库的方法详解
一、何为git git就是版本控制器，就比如说你新建了一个git文件夹，里面用于存放你的C语言实习报告，现在要用git对该文件夹进行接管。当你修改了你的C语言实习报告点击保存之后，就用git的相关命令，提交给git，让…...
基于网络爬虫的天气数据分析
二、网络爬虫设计 网络爬虫原理 网络爬虫是一种自动化程序，用于从互联网上获取数据。其工作原理可以分为以下几个步骤： 定义起始点：网络爬虫首先需要定义一个或多个起始点（URL），从这些起始点开始抓取数据…...
Javaweb之SpringBootWeb案例员工管理之删除员工的详细解析
3.3 删除员工 查询员完成之后，我们继续开发新的功能：删除员工。 3.3.1 需求 当我们勾选列表前面的复选框，然后点击 "批量删除" 按钮，就可以将这一批次的员工信息删除掉了。也可以只勾选一个复选框，仅删除一…...
写点东西《什么是网络抓取？》
写点东西《什么是网络抓取？》 什么是网络抓取？ 网络抓取合法吗？ 什么是网络爬虫，它是如何工作的？ 网络爬虫示例 网络抓取工具 结论 您是否曾经想同时比较多个网站上同一件商品的价格？或者自动提取您最喜欢的…...
使用C#操作文件：一个实际案例——替换文件中的IP地址
标题： 使用C#操作文件：一个实际案例——替换文件中的IP地址 介绍： 欢迎阅读我的最新博客！今天，我们将探讨如何使用C#来处理一个实际的编程挑战：读取一个配置文件并替换其中的IP地址。这是一个非常常见的…...
Zookeeper简介
系列文章目录 Zookeeper安装教程 目录 一、Zookeeper简介 二、Zookeeper的数据结构 三、CPA理论 四、BASE 理论 五、ZooKeeper的特性 前言 这是我的学习笔记，以便后面翻阅。 一、Zookeeper简介 ZooKeeper是一个分布式的、开放源码的分布式应用程序协调服务&a…...
第33集《佛法修学概要》
请大家打开讲义第八十七页。我们讲到六度法门，这是菩萨道的六度。 佛教的修学，从浅入深，大致上可以分成三个主要的次第： 我们刚开始修学佛法的时候，第一个修学的重点，叫作“见山是山，见水是水…...
C++ 之LeetCode刷题记录（十三）
😄😊😆😃😄😊😆😃 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可…...
容器技术1-容器与镜像简介
目录 1、容器与虚拟化 2、容器发展历程 3、镜像简介 4、镜像原理 （1）分层存储 （2）写时复制 （3）内容寻址 （4）联合挂载 1、容器与虚拟化 容器技术在操作系统层面实现了对计算机…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制，展现出显著的技术优势： 深层组织穿透能力：适用于活体组织深度成像 高分辨率观测性能：满足微观结构的精细研究需求 低光毒性特点：减少对样本的损伤…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...