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>

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

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

相关文章

华为无线AC内三层漫游配置详解

重要说明 1、在一台ac中实现三层漫游 2、ac和核心的互联vlan和ap的管理vlan是同一个广播域&#xff0c;可以不用配option 43 3、直接转发模式&#xff0c;ac上可以不起业务vlan&#xff0c;ac和核心交换机上可以只放行一个互联vlan 10 4、ac上要启两个vap魔板&#xff0c;两个…

使用JAVA Zookeeper构建分布式键值存储

在这篇文章中,我将使用 JAVA 和网络套接字构建一个简单的分布式键值存储。 我将展示如何在具有多个分区和复制的集群中使用 Zookeeper 作为协调服务。 本系统中Zookeeper服务的功能如下: 维护从服务器到分区的映射,即哪些服务器属于分区“i”。这些数据还可用于推断哪些服务…

flutter 之proto

和嵌入式用proto协议来通信&#xff0c;以mac来演示 先在电脑上安装protobuf&#xff08;在博主文章内容里面搜Mac安装protobuf&#xff09;&#xff0c;然后在桌面上放这几个文件&#xff0c;且build_proto_dart.sh文件内容如图所示 #!/bin/bashSCRIPT$(readlink -f "$0…

【JavaWeb】day01-HTMLCSS

day01-HTML&CSS HTML 图片标签&#xff1a;<img> src&#xff1a;指定图像URL&#xff08;绝对路径/相对路径&#xff09;width&#xff1a;图像宽度&#xff08;像素/相对于父元素的百分比&#xff09;height&#xff1a;图像高度&#xff08;像素/相对于父元素的百…

ubuntu terminator 非常好用的护眼配置

安装 sudo apt install terminator 配置文件&#xff1a;sudo gedit ~/.config/terminator/config &#xff08;如果没有就创建&#xff09; 配置如下&#xff1a; [global_config] handle_size -3 title_transmit_fg_color "#000000" title_trans…

c# label 自定义行间距

label 添加 Paint 事件。用"\n" 段落换行 private void label2_Paint(object sender, PaintEventArgs e){int LineDistance 8;//行间距System.Windows.Forms.Label label sender as System.Windows.Forms.Label;System.Drawing.Font drawFont label.Font;label.Au…

【neo4j】neo4j的安装与使用

【neo4j】neo4j的安装与使用 安装java https://www.oracle.com/java/technologies/downloads/ 按照步骤安装即可 配置环境变量 在系统变量中添加 path变量中添加 安装neo4j https://neo4j.com/deployment-center/ 下载后&#xff0c;在指定位置解压缩 与java相同&#…

R语言【base】——which():给出逻辑对象的 TRUE 索引,允许使用数组索引。

Package base version 4.2.0 Parameters which(x, arr.ind FALSE, useNames TRUE)arrayInd(ind, .dim, .dimnames NULL, useNames FALSE) 参数【x】&#xff1a;逻辑向量或数组。允许省略 NA&#xff08;视作 FALSE&#xff09;。 参数【arr.ind】&#xff1a;逻辑&…

Android MVP 写法

前言 Model&#xff1a;负责数据逻辑 View&#xff1a;负责视图逻辑 Presenter&#xff1a;负责业务逻辑 持有关系&#xff1a; 1、View 持有 Presenter 2、Model 持有 Presenter 3、Presenter 持有 View 4、Presenter 持有 Model 辅助工具&#xff1a;ViewBinding 执行…

ORACLE P6 v23.12 最新虚拟机(VM)全套系统环境分享

引言 根据上周的计划&#xff0c;我简单制作了两套基于ORACLE Primavera P6 最新发布的23.12版本预构建了虚拟机环境&#xff0c;里面包含了全套P6 最新版应用服务 此虚拟机仅用于演示、培训和测试目的。如您在生产环境中使用此虚拟机&#xff0c;请先与Oracle Primavera销售代…

Gpt指引ubuntu安装java8/11

在Ubuntu系统上安装Java环境通常包括以下几个步骤&#xff1a; 更新软件包索引&#xff1a; 在安装新软件之前&#xff0c;最好先更新Ubuntu的软件包索引。这可以确保你安装的是最新版本的软件包。可以使用以下命令来更新&#xff1a; sudo apt update安装Java&#xff1a; U…

云原生|对象存储|minio分布式集群的搭建和初步使用(可用于生产)

前言&#xff1a; minio作为轻量级的对象存储服务安装还是比较简单的&#xff0c;但分布式集群可以大大提高存储的安全性&#xff0c;可靠性。分布式集群是在单实例的基础上扩展而来的 minio的分布式集群有如下要求&#xff1a; 所有运行分布式 MinIO 的节点需要具有相同的访…

亚信安慧AntDB数据并行加载工具的实现(二)

3.功能性说明 本节对并行加载工具的部分支持的功能进行简要说明。 1) 支持表类型 并行加载工具支持普通表、分区表。 2) 支持指定导入字段 文件中并不是必须包含表中所有的字段&#xff0c;用户可以指定导入某些字段&#xff0c;但是指定的字段数要和文件中的字段数保持一…

如何利用ChatGPT来提高编程效率

如何利用ChatGPT来提高编程效率 在当今这个信息爆炸和技术快速发展的时代,程序员们面临着巨大的压力,既要保证代码的质量,又要提高工作效率。幸运的是,人工智能(AI)正在改变我们编写和维护代码的方式,而OpenAI的ChatGPT是其中的佼佼者。本文将讨论如何利用ChatGPT以及结合…

leetcode刷题记录07(2023-04-30)【二叉树展开为链表 | 买卖股票的最佳时机 | 二叉树中的最大路径和(递归) | 最长连续序列(并查集)】

114. 二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。 展开后的单链表应该与二叉树 先序遍历 顺…

SQL注入安全漏洞详解

1. SQL注入的原理&#xff1a; SQL注入的攻击行为是通过用户可控参数中注入了SQL语法&#xff0c;改变原有SQL结构&#xff0c;以下两种情况可以造成SQL注入&#xff1a; 1.使用字符串拼接的方式构造SQL语句 2.未对用户可控参数进行严格的过滤&#xff0c;便把参数内容拼接到…

AxGlyph安装教程

AxGlyph安装教程 AxGlyph是一款用于创建科学图表的强大工具&#xff0c;以下是AxGlyph的下载和安装步骤。 步骤一&#xff1a;下载AxGlyph 访问下载地址&#xff1a;点击下载 解压安装包 步骤二&#xff1a;运行安装程序 点击AxGlyph_Setup_Win7_8_10.exe进行安装 安装完成…

FHE简介

1. 引言 加密技术已经存在了数千年&#xff0c;用于相互发送秘密信息。例如&#xff0c;凯撒密码是最早的加密技术之一&#xff0c;可以追溯到公元前60年&#xff0c;其只由字母表中的字母交换组成。 随着互联网的出现&#xff0c;人们生成的私人数据量呈指数级增长&#xff…

【Maven】下载及配置

文章目录 1. 下载2. 解压3. 配置环境变量4. 验证 Maven 是一个跨平台的项目管理工具。作为 Apache 组织的一个颇为成功的开源项目&#xff0c;其主要服务于基于 Java 平台的项目创建&#xff0c;依赖管理和项目信息管理&#xff0c;是一个自动化构建工具&#xff0c;本文将介绍…

各种免费好用的api,含天气查询、IP查询、物流查询等

跨境国际快递物流查询&#xff1a;支持900物流商&#xff0c;提供实时查询和单号订阅API接口。稳定高效&#xff0c;为跨境电商平台、独立站、软件服务商提供优质服务。手机号码归属地&#xff1a;可根据手机号码查询其省市区、运营商区号行政区划代码等信息。 上亿条数据囊括最…