animation动画+关键帧实现轮播图效果（再次学习）!
再次遇到要实现轮播图效果的时候，发现还是不怎么会，因为对js还没有熟练使用，只希望使用h5和css3实现效果
虽然之前已经学习了一遍了，但是还是不熟练，再次学习一下了
这次的可作为套板使用，无序列表为框架模型，动画关键帧实现轮播效果，话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
ul{
width: 2000px;
position: absolute;
animation: mybox 10s infinite normal;
}
li{
float: left;
}
li>img{
width: 400px;
height: 300px;
}
@keyframes mybox{
0%{
left: 0;
}
25%{
left: -400px;
}
50%{
left: -800px;
}
75%{
left: -1200px;
}
100%{
left: -1600px;
}
}
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0707/235106Yxqlc.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0704/163037oy7Cf.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0522/235702c1FPG.jpg"></li>
<li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
</ul>
</div>
</body>
</html>
注意：通配符样式是必要的，不知道为啥；
图片为了实现最后一张和第一张做到无缝衔接过渡，需要设置为同一张图片，不知道为啥；
定位样式设置是必要的，不知道为啥；
animation的animation-timing-function属性及动画的速度曲线，默认是ease，此处没有设置应该是默认的，但效果和ease-in-out一样，不知道为啥；
唉，继续学习吧还是。
效果如下所示：
完毕。
animation动画+关键帧实现轮播图效果（再次学习）!的更多相关文章
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 小程序实践（二）：swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- Android项目实战（四十七）：轮播图效果Viewpager
简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V 需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...
随机推荐
- 全网最详细中英文ChatGPT-GPT-4示例文档-智能聊天机器人从0到1快速入门——官网推荐的48种最佳应用场景（附python/node.js/curl命令源代码，小白也能学）
目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...
- vue高阶函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring源码系列：核心概念解析
前言 本文旨在为读者解析Spring源码中的关键类,以便读者在深入阅读源码时,能够了解关键类的作用和用途.在阅读Spring源码时,经常会遇到一些不熟悉的概念,了解关键类的作用可以帮助读者更好地理解这 ...
- Unix shell开头的#!
1:位于脚本文件最开始 2:#!告诉系统内核应有哪个shell来执行所指定的shell脚本. 3:如#! /bin/bash ,#!与shell文件名之间可以有空格,没有限定. 4:指定的shell可 ...
- pinia的使用
1. pinia和vuex的区别 pinia没有mutations,只有:state. getters. actions pinia分模块不需要modules(之前vuex分模块需要modules) ...
- MySQL概述与安装
MySQL数据库 概要: 一.MySQL数据库的概述 二.MySQL数据库的搭建 三.MySQL数据库软件的使用 四.MySQL数据类型 五.MySQL数据库数据的操作 一.初始MySQL数据库 1. ...
- count(列名)、count(1)和 count(*)有什么区别?
在MySQL中,这几个都是统计操作,很多人在使用的时候,都使用的是count(1),这有没有问题?使用正确?达到了统计效果? 我们从效果和效率两方面来分析下 执行效果 count(*) 包括了所有的列 ...
- PM系统成本科目挂接教程-如何查手册和看帮助文档
如果这么简单的问题都无法入门只能说回炉重造吧孩子. ---by SheZQ 正文 成本科目挂接作为PM系统最基本的取数依据,数据汇总的根本,是必须要会的技能.如果没有挂接,就会出现空值或者0值. 摘自 ...
- 2022-04-08：在一张 无向 图上，节点编号0~N-1。老鼠开始在1节点，猫在2节点，0号节点是洞，老鼠想进洞， 老鼠第先出发，猫后出发，轮流行动。 在每个玩家的行动中，他们 必须 沿着图中与所
2022-04-08:在一张 无向 图上,节点编号0~N-1.老鼠开始在1节点,猫在2节点,0号节点是洞,老鼠想进洞, 老鼠第先出发,猫后出发,轮流行动. 在每个玩家的行动中,他们 必须 沿着图中与所 ...
- 2021-07-08：股票问题5。给定一个整数数组，其中第 i 个元素代表了第 i 天的股票价格 。设计一个算法计算出最大利润。在满足以下约束条件下，你可以尽可能地完成更多的交易（多次买卖一支股票）
2021-07-08:股票问题5.给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格 .设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票) ...