CSS animation动画和关键帧实现轮播图效果HTML
CSS animation动画和关键帧实现轮播图效果HTML
这轮播图效果使用h5和css3实现效果，不需要js控制，但是其中的缺点就是不能使用鼠标进行切换效果。
具有代码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS animation动画和关键帧实现轮播图效果</title><style type="text/css">* {margin: 0;padding: 0;}#contianer {width: 800px;height: 500px;overflow: hidden;position: relative;margin: 0 auto;}ul {width: 4000px;position: absolute;animation: animationContent 10s infinite normal;list-style: none;}li {float: left;position: relative;}li>img {width: 800px;height: 500px;}li .num {position: absolute;width: 80px;height: 80px;line-height: 80px;background: rgba(136, 255, 0, 0.5);border-radius: 50%;text-align: center;font-size: 30px;color: rgba(255, 255, 255, 0.5);font-weight: bold;margin: 0 auto;left: calc(50% - 40px);top: calc(50% - 40px);}@keyframes animationContent {0% {left: 0;}25% {left: -100%;}50% {left: -200%;}75% {left: -300%;}100% {left: -400%;}}</style>
</head><body><div id="contianer"><ul><li><div class="num">1</div><img src="https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"></li><li><div class="num">2</div><img src="https://img1.baidu.com/it/u=1168515712,1565504543&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"></li><li><div class="num">3</div><img src="https://img2.baidu.com/it/u=2080453877,3879502418&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"></li><li><div class="num">4</div><img src="https://img1.baidu.com/it/u=1141047078,1542868282&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"></li><li><div class="num">5</div><img src="https://img1.baidu.com/it/u=2337288053,330189716&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"></li></ul></div>
</body></html>
相关文章：
CSS animation动画和关键帧实现轮播图效果HTML
CSS animation动画和关键帧实现轮播图效果HTML 这轮播图效果使用h5和css3实现效果，不需要js控制，但是其中的缺点就是不能使用鼠标进行切换效果。 具有代码如下 <!DOCTYPE html> <html lang"en"><head><meta charset&quo…...
Unity之键盘鼠标的监控
小编最近在玩大表哥2，通过 W、A、S、D 来移动亚瑟，鼠标左键来不吃牛肉 我们都知道玩家通过按键鼠标来控制游戏人物做出相应的行为动作，那在Unity引擎里是怎么知道玩家是如何操作的呢？本篇来介绍Unity是怎样监控键盘和鼠标的。 首先…...
C# windows服务程序开机自启动exe程序
我们使用传统的Process.Start(".exe")启动进程会遇到无法打开UI界面的问题，尤其是我们需要进行开启自启动程序设置时出现诸多问题，于是我们就想到采用windows服务开机自启动来创建启动一个新的exe程序，并且是显式运行。 首先是打开…...
【SpringMVC】常用注解
什么是MVC？ MVC是一种程序分层开发模式，分别是Model（模型），View（视图）以及Controller（控制器）。这样做可以将程序的用户界面和业务逻辑分离，使得代码具有良好…...
关于曲率、曲率半径和曲率圆，看这几篇文章就够啦
关于曲率、曲率半径和曲率圆的内容，是考研数学数学一和数学二大纲中明确要求掌握的内容，但这部分内容在很多教材教辅以及练习题中较少涉及。在本文中，荒原之梦考研数学网就为大家整理了曲率、曲率半径和曲率圆方程相关的概念、基础知识以及练…...
java面试题-Spring常见的异常类有哪些？
远离八股文，面试大白话，通俗且易懂 看完后试着用自己的话复述出来。有问题请指出，有需要帮助理解的或者遇到的真实面试题不知道怎么总结的也请评论中写出来，大家一起解决。 java面试题汇总-目录-持续更新中 NullPointerException&…...
数据库选择题 （期末复习）
数据库第一章 概论简答题 数据库第二章 关系数据库简答题 数据库第三章 SQL简答题 数据库第四第五章 安全性和完整性简答题 数据库第七章 数据库设计简答题 数据库第九章 查询处理和优化简答题 数据库第十第十一章 恢复和并发简答题 2015期末 1、在数据库中，下列说…...
WeNet语音识别+Qwen-72B-Chat Bot+Sambert-Hifigan语音合成
WeNet语音识别Qwen-72B-Chat Bot👾Sambert-Hifigan语音合成 简介 利用 WeNet 进行语音识别，使用户能够通过语音输入与系统进行交互。接着，Qwen-72B-Chat Bot作为聊天机器人接收用户的语音输入或文本输入，提供响应并与用户进行对话…...
是否需要跟上鸿蒙（OpenHarmony）开发岗位热潮？
前言 自打华为2019年发布鸿蒙操作系统以来，网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android，更激烈的讨论随之而来。 本文没有宏大的叙事，只有基于现实的考量。 通过本文，你将了解到： Har…...
【Golang】Json 无法表示 float64 类型的 NaN 以及 Inf 导致的 panic
【Golang】Json 无法表示 float64 类型的 NaN 以及 Inf 导致的 panic 原因 golang 服务出现了 panic，根据 panic 打印出的堆栈找到了问题代码，看上去原因是：json 序列化时，遇到了无法序列化的内容 [panic]: json: unsupported …...
bootstrap5实现宠物商店网站 Cat-Master
一、需求分析 宠物商店网站是指专门为宠物商店或宠物用品商家而建立的在线平台。这种网站的功能通常旨在提供以下服务： 产品展示：宠物商店网站通常会展示宠物食品、玩具、床上用品、健康护理产品等各种宠物用品的图片和详细信息。这样，潜在的…...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）创建并初始化TcpServer实例 以及 启动
对于一个TcpServer来说，它的灵魂是什么？就是需要提供一个事件循环EventLop(EventLoop)，不停地去检测有没有客户端的连接到达，有没有客户端给服务器发送数据，描述的这些动作，反应堆模型能够胜任。当服务器和…...
边缘计算设备是什么意思。
问题描述：边缘计算设备是什么意思。 问题解答： 边缘计算（Edge Computing）是一种计算模型，其主要思想是在距离数据产生源头更近的地方进行数据处理和计算，而不是将所有数据传输到远程云服务器进行处理。边…...
使用ChatGPT midjourney 等AI智能工具，能为视觉营销做些什么？
使用ChatGPT、Midjourney等AI智能工具，可以极大地提升视觉营销的效率和创意水平。以下是这些工具在视觉营销中的一些具体应用： 内容创作与文案撰写（ChatGPT） 广告文案生成：根据产品特点和目标受众，生成吸…...
图像分割实战-系列教程4：unet医学细胞分割实战2（医学数据集、图像分割、语义分割、unet网络、代码逐行解读）
🍁🍁🍁图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 unet医学细胞分割实战1 unet医学细胞分割实战2 unet医学细胞分割实战3 unet医学细胞分割实战4 unet…...
防火墙未开端口导致zookeeper集群异常，kafka起不来
转载说明：如果您喜欢这篇文章并打算转载它，请私信作者取得授权。感谢您喜爱本文，请文明转载，谢谢。 问题描述： 主机信息： IPhostname10.0.0.10host1010.0.0.12host1210.0.0.13host13 在这三台主机上部署…...
React-hook-form-mui（二）：表单数据处理
前言 在上一篇文章中，我们介绍了react-hook-form-mui的基础用法。本文将着表单数据处理。 react-hook-form-mui提供了丰富的表单数据处理功能，可以通过watch属性来获取表单数据。 Demo 下面是一个使用watch属性的例子： import React from…...
java网络文件地址url的转换为MultipartFile文件流
废话不多说，直接上代码 一、异常捕捉类 public class BusinessException extends RuntimeException {public BusinessException(String msg){super(msg);} }二、转换类 package com.example.answer_system.utils;import org.springframework.mock.web.MockMultipa…...
JS实现/封装节流函数
封装节流函数 节流原理：在一定时间内，只能触发一次 let timer, flag; /*** 节流原理：在一定时间内，只能触发一次* * param {Function} func 要执行的回调函数 * param {Number} wait 延时的时间* param {Boolean} immediate 是否立…...
ENVI 各版本安装指南
ENVI下载链接 https://pan.baidu.com/s/1APpjHHSsrXMaCcJUQGmFBA?pwd0531 1.鼠标右击【ENVI 5.6(64bit）】压缩包（win11及以上系统需先点击“显示更多选项”）选择【解压到 ENVI 5.6(64bit）】。 2.打开解压后的文件夹，…...
60天零基础干翻C++————初识C++
初识c 命名空间命名空间的定义命名空间的使用 输入输出流缺省参数引用引用定义常量的引用引用的使用场景做函数参数引用做返回值 命名空间 命名空间的定义 在c语言中会有下面问题 上述代码中，全局变量rand 可能会命名冲突，如下图 此时编译失败&…...
考研复试英语口语问答举例第二弹
考研复试英语口语问答举例第二弹 文章目录 考研复试英语口语问答举例第二弹Question ：介绍你的读研兴趣与动机Answer11：（自动化控制方向）Answer12：（集成电路方向）Answer13：ÿ…...
MyBatis-Plus实现自定义SQL语句的分页查询
正常开发的时候，有时候要写一个多表查询，然后多表查询之后还需要分页，MyBatis-Plus的分页插件功能挺不错的，可以很简单实现自定义SQL的分页查询。 分页插件配置 import com.baomidou.mybatisplus.annotation.DbType; import com…...
vue3 里的 ts 类型工具函数
目录 前言一、PropType\<T>二、MaybeRef\<T>三、MaybeRefOrGetter\<T>四、ExtractPropTypes\<T>五、ExtractPublicPropTypes\<T>六、ComponentCustomProperties七、ComponentCustomOptions八、ComponentCustomProps九、CSSProperties 前言 相关 …...
【SpringCloud】之远程消费（进阶使用）
🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是君易--鑨，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的博客专栏《SpringCloud开发之远程消费》。🎯&a…...
自然语言处理24-T5模型的介绍与训练过程，利用简单构造数据训练微调该模型，体验整个过程
大家好，我是微学AI，今天给大家介绍一下自然语言处理24-T5模型的介绍与训练过程，利用简单构造数据训练微调该模型，体验整个过程。在大模型ChatGPT发布之前，NLP领域是BERT,T5模型为主导，T5（Text-to-Text Transfer Transformer）是一种由Google Brain团队在2019年提出的自然…...
CISSP 第5章 保护资产的安全
1、资产识别和分类 1.1 敏感数据 1.1.1 定义 敏感数据是任何非公开或非机密的信息，包括机密的、专有的、受保护的或因其对组织的价值或按照现有的法律和法规而需要组织保护的任何其他类型的数据。 1.1.2 个人身份信息PII 个人身份信息（PII）…...
docker安装-在linux下的安装步骤
#切换到root用户 su yum安装jcc相关 yum -y install gcc yum -y install gcc-c 安装yum-utils sudo yum install -y yum-utils 设置stable镜像仓库 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum软件包索…...
在Uniapp中使用Echarts创建可视化图表
在uniapp中可以引入echarts创建数据可视化图表。 1. 安装Echarts 使用npm安装echarts插件，命令如下： npm install echarts --save2. 引入Eharts 在需要使用Echarts的页面引入： import *as echarts from echarts3. 创建实例 创建画布元素…...
基于python的leetcode算法介绍之动态规划
文章目录 零 算法介绍一 例题介绍 使用最小花费爬楼梯问题分析 Leetcode例题与思路[118. 杨辉三角](https://leetcode.cn/problems/pascals-triangle/)解题思路题解 [53. 最大子数组和](https://leetcode.cn/problems/maximum-subarray/)解题思路题解 [96. 不同的二叉搜索树](h…...
谷歌浏览器对做网站有什么好处/免费优化
今天看到这样一片文章: 在义乌买东西便宜到吓死你 近半年来，笔者替在澳洲做生意的一位亲戚办货，去了7次浙江义乌的小商品市场。在上海七铺路10元买3双的白色棉运动袜，那里卖7角；100支装的双头棉花签在上海家乐福大卖场卖1.2元&am…...
wine wordpress theme/利尔化学股票股吧
最近发现项目API请求比较慢，通过抓包发现主要是response时间太长，于是就开始进行优化工作。优化工作的关键一步是定位出问题的瓶颈，对于优化速度来说，从优化函数执行时间这个维度去切入是一个不错的选择。 本文侧重分析࿰…...
制作企业网站作业网页模板/优化大师电脑版
MQTT中的QoS等级 MQTT设计了一套保证消息稳定传输的机制，包括消息应答、存储和重传。在这套机制下，提供了三种不同层次QoS（Quality of Service）： QoS0，At most once，至多一次； QoS…...
网站开发哈尔滨网站开发公司/汽车软文广告
参考 基于PCNTL的PHP并发编程 PCNTL 是 PHP 中的一组进程控制函数，可以用来 fork（创建）进程，传输控制信号等。 在PHP中，进程控制支持默认关闭。编译时通过 --enable-pcntl 配置选项可以使 PHP的 CGI 或 CLI 版本打开进…...
网站建设我们的优势/seo怎么发布外链
Java程序的运行包括两个非常重要的阶段：一.编译阶段第一步：程序员需要在计算机硬盘中任意位置创建一个.java扩展名的文件，该文件被称为 java源文件，源文件当中编写的是java源代码/源程序。java源代码必须符合java的语法规则。第二…...
如何申请开通网站/网络营销方式
想成为嵌入式程序员应知道的0x10个基本问题（面试必备） 文章目录想成为嵌入式程序员应知道的0x10个基本问题（面试必备）简述:预处理器（Preprocessor）死循环（Infinite loops）数据声明&a…...