前端常用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、容器与虚拟化 容器技术在操作系统层面实现了对计算机…...
openssl3.2 - 官方demo学习 - smime - smdec.c
文章目录 openssl3.2 - 官方demo学习 - smime - smdec.c概述笔记END openssl3.2 - 官方demo学习 - smime - smdec.c 概述 从pem证书中得到x509*和私钥, 用私钥和证书解密MIME格式的PKCS7密文, 并保存解密后的明文 MIME的数据操作, 都是PKCS7相关的 笔记 /*! \file smdec.c …...
vue中改变v-html中包含body标签的样式修改方法
vue-改变body的css样式 beforeCreate() {document.querySelector(body).setAttribute(style, background-color:#f4f4f4; color:#666666;)}, beforeDestroy() {document.body.removeAttribute(style)},在方法里加这个 document.querySelector(body).setAttribute(style, backg…...
港科夜闻｜香港科大团队研发多功能,可重构和抗破坏单线感测器阵列
关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力，这种新型感测器阵列方法可能优化感测器阵列…...
线程池的简单介绍及使用
线程池 线程池的参数介绍拒绝策略 线程池的任务处理流程使用Executors创建常见的线程池 线程池的参数介绍 corePoolSize: (核心线程数)这是线程池中始终存在的线程数，即使这些线程处于空闲状态。maximumPoolSize:(最大线程数) 是线程池允许的最大线程数。keepAliveT…...
使用Python的pygame库实现下雪的效果
使用Python的pygame库实现下雪的效果 关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 先给出效果图： 源码如下： import pygame import random# 初始化pygame pygame.init()# 设置屏幕尺寸 width…...
qt学习：进度条，水平滑动条，垂直滑动条+rgb调试实战
目录 水平滑动条，垂直滑动条 常用信号 进度条 常用信号 修改进度条 例子 rgb调色 配置ui界面 编写3个进度条的事件函数 添加链表容器和按钮索引 在.h里的类定义 初始化链表容器和按钮索引 编写添加颜色的按钮点击事件函数 效果 水平滑动条，…...
C语言中的浮点数存储
首先明确一个概念：C语言中整形是按照二进制存储在内存中，浮点型是按科学计数法存储在内存中（本质上存储的还是二进制数据0和1）。 如果没看懂这句话，没关系！看完以下正文，你就会豁然开朗&#x…...
Pypputeer自动化
Pyppeteer简介 pyppeteer 是 Python 语言的一个库，它是对 Puppeteer 的一个非官方端口，Puppeteer 是一个 Node 库，Puppeteer是Google基于Node.js开发的一个工具，它提供了一种高层次的 API 来通过 DevTools 协议控制 Chrome 或 Ch…...
selenium爬虫爬取当当网书籍信息 | 最新！
如果对selenium不了解的话可以到下面的链接中看基础内容： selenium爬取有道翻译-CSDN博客 废话不多说了下面是代码并且带有详细的注释： 爬取其他类型的书籍和下面基本上是类似的可以自行更改。 # 导入所需的库 from selenium import webdriver from …...
PTA 7-1 最大子列和问题
给定K个整数组成的序列{ N1, N2, ..., NK }，“连续子列”被定义为{ Ni, Ni1, ..., Nj }，其中 1≤i≤j≤K。“最大子列和”则被定义为所有连续子列元素的和中最大者。例如给定序列{ -2, 11, -4, 13, -5, -2 }，其连续子列{ 11, -4,…...