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

前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)

一、横版跑马灯

Untitled.gif

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 重点:盒子宽度 600 */width: 600px;height: 150px;border: 3px solid black;overflow: hidden;}.box ul {margin: 0;padding: 0;list-style: none;display: flex;height: 100%;animation: move 5s linear infinite;}/* hover 暂停,不用可去掉 */.box ul:hover {animation-play-state: paused;}.box ul li {height: 100%;/* 重点:单个图片宽度 200,相当于默认不动可见 3 个 */width: 200px;flex-shrink: 0;}.box ul li img {height: 100%;width: 100%;}@keyframes move {/* 为什么设置 -800px ?公式:主图张数 * 单个图片宽度(每轮主图只有 4 张,4 张照片为一个周期,如果需要轮播的主图为 7、8、9...张,都一样) */100% {transform: translateX(-800px);}}</style>
</head>
<body><!-- 窗口 --><div class="box"><!-- 轮播列表 --><ul><!-- 轮播主图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li><li><a href="#"><img src="./2.jpg" alt=""></a></li><li><a href="#"><img src="./3.jpg" alt=""></a></li><li><a href="#"><img src="./4.jpg" alt=""></a></li><!-- 轮播完成防止留白 --><!-- 怎么确定尾部需要几张防止留白,3 张是怎么得出的?其实就是上面: 盒子宽度 / 单个图片宽度 = 一屏几张留白图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li><li><a href="#"><img src="./2.jpg" alt=""></a></li><li><a href="#"><img src="./3.jpg" alt=""></a></li></ul>
</div>
</body>
</html>

二、竖版跑马灯

Untitled.gif

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 600px;/* 重点:盒子宽度 150 */height: 150px;border: 3px solid black;overflow: hidden;}.box ul {margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;height: 100%;animation: move 5s linear infinite;}/* hover 暂停,不用可去掉 */.box ul:hover {animation-play-state: paused;}.box ul li {/* 重点:单个图片高度 150,相当于默认不动可见 1 个 */height: 150px;width: 100%;flex-shrink: 0;}.box ul li img {height: 100%;width: 100%;}@keyframes move {/* 为什么设置 -600px ?公式:主图张数 * 单个图片高度(每轮主图只有 4 张,4 张照片为一个周期,如果需要轮播的主图为 7、8、9...张,都一样) */100% {transform: translateY(-600px);}}</style>
</head>
<body><!-- 窗口 --><div class="box"><!-- 轮播列表 --><ul><!-- 轮播主图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li><li><a href="#"><img src="./2.jpg" alt=""></a></li><li><a href="#"><img src="./3.jpg" alt=""></a></li><li><a href="#"><img src="./4.jpg" alt=""></a></li><!-- 轮播完成防止留白 --><!-- 怎么确定尾部需要几张防止留白,1 张是怎么得出的?其实就是上面: 盒子高度 / 单个图片高度 = 一屏几张留白图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li></ul>
</div>
</body>
</html>

三、竖版跑马灯(带渐变遮罩,可以改成横向的)

Untitled.gif

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 600px;/* 重点:盒子宽度 150 */height: 150px;overflow: hidden;}.box ul {margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;height: 100%;animation: move 5s linear infinite;}/* hover 暂停,不用可去掉 */.box ul:hover {animation-play-state: paused;}.box ul li {/* 重点:单个图片高度 150,相当于默认不动可见 1 个 */height: 150px;width: 100%;flex-shrink: 0;}.box ul li img {height: 100%;width: 100%;}@keyframes move {/* 为什么设置 -600px ?公式:主图张数 * 单个图片高度(每轮主图只有 4 张,4 张照片为一个周期,如果需要轮播的主图为 7、8、9...张,都一样) */100% {transform: translateY(-600px);}}/* 顶部、底部白色渐变 */.header-blur {position: absolute;left: 0;top: 0;right: 0;height: 10px;/* background-image: linear-gradient(red, green 50%); */background-image: linear-gradient(#fff, rgba(0, 0, 0, 0) 50%);z-index: 1;}.footer-blur {position: absolute;left: 0;bottom: 0;right: 0;height: 10px;/* background-image: linear-gradient(red 40%, green); */background-image: linear-gradient(rgba(0, 0, 0, 0) 40%, #fff);z-index: 1;}</style>
</head>
<body><!-- 窗口 --><div class="box"><!-- 顶部、底部白色渐变 --><div class="header-blur"></div><div class="footer-blur"></div><!-- 轮播列表 --><ul><!-- 轮播主图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li><li><a href="#"><img src="./2.jpg" alt=""></a></li><li><a href="#"><img src="./3.jpg" alt=""></a></li><li><a href="#"><img src="./4.jpg" alt=""></a></li><!-- 轮播完成防止留白 --><!-- 怎么确定尾部需要几张防止留白,1 张是怎么得出的?其实就是上面: 盒子高度 / 单个图片高度 = 一屏几张留白图 --><li><a href="#"><img src="./1.jpg" alt=""></a></li></ul>
</div>
</body>
</html>

相关文章:

前端原生 CSS 跑马灯效果,无限轮播(横竖版本,带渐变遮罩,简单实用)

一、横版跑马灯 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wid…...

4.8 注解与自定义注解

文章目录1.概述2.注解的分类2.1 JDK注解2.2 元注解2.2.1 Target ElementType…2.2.2 Retention RetentionPolicy…3 自定义注解1.概述 在注解刚出现时&#xff0c;曾受到过好多程序员的鄙夷&#xff0c;觉得这就是多此一举的操作&#xff1b; 但随着时间的推移&#xff0c;越…...

webpack 的热更新是如何做到的?原理是什么?

Hot Module Replacement&#xff0c;简称 HMR&#xff0c;在不需要刷新整个页面的同时更新模块&#xff0c;能够提升开发的效率和体验。热更新时只会局部刷新页面上发生了变化的模块&#xff0c;同时可以保留当前页面的状态&#xff0c;比如复选框的选中状态等。 在 webpack 中…...

嵌入式ARM设计编程(一) 简单数据搬移

文章和代码已归档至【Github仓库&#xff1a;hardware-tutorial】&#xff0c;需要的朋友们自取。或者公众号【AIShareLab】回复 嵌入式 也可获取。 一、实验目的 熟悉实验开发环境&#xff0c;掌握简单ARM汇编指令的使用方法。 二、实验环境 硬件&#xff1a;PC机 软件&am…...

【Selenium】十分钟手把手带你学会WebDriver API

目录 1、定位元素【8种】 2、操作测试对象 3、添加等待 4、弹窗类型 5、浏览器的操作 6、键盘事件 7、选择框 8、上传文件 1、定位元素【8种】 元素定位是自动化测试的核心&#xff0c;想要去操作一个对象&#xff0c;第一步就是需要我们先去识别这个对象。每个对象就会…...

3DMAX高级弯曲插件使用教程

3dMax高级弯曲插件是对3dmax原生“弯曲&#xff08;Bend&#xff09;”修改器的一个增强&#xff0c;给用户更多控制弯曲修改器的参数设置&#xff0c;它让用户输入宽度&#xff0c;插件脚本将移动中心以获得正确的宽度。 主要特性&#xff1a; - 使用智能捕捉捕捉到自定义网格…...

前端面试题之性能优化大杂烩

主要内容为下面几大类&#xff1a;移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。 移动端性能优化&#xff1a; 保持单个文件小于25KB 移动网站页面要求下载资源&#xff0c;如果文件过大&#xff0c;会大大减慢页面加载速度。 打包内容为分段multipart文…...

SpringBoot+Vue实现养老智慧服务平台

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏…...

tigervnc2023

sudo apt-get install tigervnc-standalone-server 配置用户 /etc/tigervnc/vncserver.users :1user1 :2user2 :3user3 全局配置 /etc/tigervnc/vncserver-config-defaults $localhost"no"; $geometry "1920x1200"; 分别进入user1 user2 user3 用户…...

智能三子棋(人机大战)—— 你会是最终赢家吗?万字讲解让你实现与自己对弈

魔王的介绍&#xff1a;&#x1f636;‍&#x1f32b;️一名双非本科大一小白。魔王的目标&#xff1a;&#x1f92f;努力赶上周围卷王的脚步。魔王的主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王.&#x1f525;&#x1f525;&#x1f525; ❤️‍&#x1…...

【自制开发板】自制STM32F407开发板(含TFT 8080串口屏幕接口)

【2023 年 2 月 14 日】 许久没有更新&#xff0c;最近做了个小开发板玩了玩。更新一下吧&#xff0c;作为记录&#xff01;&#xff01; 主要是象试一下LVGL在STM32上的应用&#xff0c;所以开发板的大小都是基于屏幕大小来设计的。 分享出来&#xff0c;给大家一个板子结构…...

openvino yolov5/ssd 实时推流目标检测在html上显示

安装ffmepg并添加到环境变量中&#xff0c;流媒体使用m7s 运行效果 SSD&#xff1a;检测在10ms左右&#xff0c;yolov5在100ms左右 app.py #!/usr/local/bin/python3 # encodin: utf-8import subprocess import threading import time import cv2 import osfrom OpenVinoYoloV…...

基于FPGA的 SPI通信 设计(1)

引言 低速通信目前搞过 UART串口通信、IIC通信。其实 SPI 也算是中低速&#xff08;有时也可以用作高速通信&#xff09;串行通信的范畴&#xff0c;但是一直还没真正实现过&#xff0c;所以此系列就 SPI的协议以及FPGA设计作几篇博客记录。欢迎订阅关注~ SPI 标准协议 x1模式…...

为什么西门子、美的等企业这样进行架构升级,看看改造效果就知道了

在工业领域&#xff0c; 生产、测试、运行阶段都可能会产生大量带有时间戳的传感器数据&#xff0c;这都属于典型的时序数据。时序数据主要由各类型实时监测、检查与分析设备所采集或产生&#xff0c;涉及制造、电力、化工、工程作业等多个行业&#xff0c;具备写多读少、量非常…...

open3d点云配准函数registration_icp

文章目录基本原理open3d调用绘图基本原理 ICP, 即Iterative Closest Point, 迭代点算法。 ICP算法有多种形式&#xff0c;其中最简单的思路就是比较点与点之间的距离&#xff0c;对于点云P{pi},Q{qi}P\{p_i\}, Q\{q_i\}P{pi​},Q{qi​}而言&#xff0c;如果二者是同一目标&am…...

HTML编码规范

本篇文章是基于王叨叨大佬师父维护的文档梳理的&#xff0c;有兴趣可以去看一下原文HTML编码规范。 1. 缩进与换行 【建议】 使用 2 个空格作为一个缩进层级&#xff0c;不允许使用tab字符 解释&#xff1a; ​ 具体项目&#xff0c;可以使用2个空格&#xff0c;也可以使用…...

PDF SDK for Linux 8.4.2 Crack

PDF SDK for Linux 是适用于任何 Linux 企业或云应用程序的强大解决方案&#xff0c;非常适合需要完全可定制的 PDF 查看器或后端流程的任何 Linux 开发人员。 将 Foxit PDF SDK 嵌入到基于 Linux 的应用程序中非常容易。只需打开您最喜欢的 Linux IDE&#xff0c;复制您需要的…...

vb 模块和作用域的关系

模块在VB中有三种类型的模块&#xff0c;分别是窗体模块、标准模块和类模块。窗体模块窗体模块中包含了窗体以及窗体中所有控件的事件过程&#xff0c;文件扩展名为&#xff08;*.frm)&#xff0c;窗体文件中不仅包含窗体对象的外观设计&#xff0c;也包含窗体模块&#xff08;…...

Redis分布式锁

一、背景 与分布式锁相对应的是「单机锁」&#xff0c;我们在写多线程程序时&#xff0c;避免同时操作一个共享变量产生数据问题&#xff0c;通常会使用一把锁来「互斥」&#xff0c;以保证共享变量的正确性&#xff0c;其使用范围是在「同一个进程」中。单机环境下&#xff0…...

京东前端经典面试题整理

img的srcset属性的作⽤&#xff1f; 响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下&#xff0c;img 会自动加载不同的图片。用法如下&#xff1a; <img src"image-128.png" srcset&qu…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...