3D划桨效果,效果请看gif图

  纯本地文件的html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>please enter your title</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			text-align:center;
		}
		li{
			list-style:none;
		}
		#box{
			position:relative;
			width:1050px;
			height:360px;
			margin:100px auto 20px;
		}
		#box ul li{
			position:absolute;
			left:0;
			top:0;
			width:1050px;
			height:360px;
			display:none;
		}
		#show{
			position:absolute;
			left:0;
			top:0;
			width:1050px;
			height:360px;
			perspective:1000px;
			display:none;
		}
		#show div{
			position:relative;
			width:525px;
			height:72px;
			/*background:red;*/
			float:left;
			transform-style:preserve-3d;
		}
		#show div em{
			position:absolute;
			left:0;
			top:0;
			display:block;
			width:525px;
			height:72px;
		}
		#show div .em1{/*木板的前面*/
			background:url("images/1.png");
			transform:translateZ(5px);
		}
		#show div .em2{/*木板的后面*/
			background:url("images/2.png");
			transform:translateZ(-5px) rotateX(-180deg);
		}
		#show div span{
			position:absolute;
			right:0;
			bottom:0;
			background:#999;
		}
		#show div span.span1{
			width:10px;
			height:72px;
			transform-origin:right;
			transform:translateZ(5px) rotateY(-90deg);
		}
		#show div span.span2{
			width:525px;
			height:10px;
			transform-origin:bottom;
			transform:translateZ(5px) rotateX(90deg);
		}
		#show div.div2 .span1{
			left:0;
			transform-origin:left;
			transform:translateZ(5px) rotateY(90deg);
		}
		/*规定左边div的旋转特效*/
		@keyframes move1{
			0%{
				transform:rotateX(0deg) rotateZ(0deg) rotateY(0deg);
				animation-timing-function:ease;/*运动速度曲线*/
			}
			60%{/*先将木板立起来*/
				transform:rotateX(0deg) rotateZ(0deg) rotateY(-60deg);
				animation-timing-function:ease-in;/*运动速度曲线*/
			}
			80%{
				transform:rotateX(90deg) rotateZ(-10deg) rotateY(-45deg);
				animation-timing-function:ease-out;/*运动速度曲线*/	
			}
			100%{
				transform:rotateX(180deg) rotateZ(0deg) rotateY(0deg);
			}
		}
		/*规定右边div的旋转特效*/
		@keyframes move2{
			0%{
				transform:rotateX(0deg) rotateZ(0deg) rotateY(0deg);
				animation-timing-function:ease;/*运动速度曲线*/
			}
			60%{/*先将木板立起来*/
				transform:rotateX(0deg) rotateZ(0deg) rotateY(60deg);
				animation-timing-function:ease-in;/*运动速度曲线*/
			}
			80%{
				transform:rotateX(90deg) rotateZ(-10deg) rotateY(45deg);
				animation-timing-function:ease-out;/*运动速度曲线*/	
			}
			100%{
				transform:rotateX(180deg) rotateZ(0deg) rotateY(0deg);
			}
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/1.png"></li>
			<li><img src="images/2.png"></li>
			<li><img src="images/3.png"></li>
			<li><img src="images/4.png"></li>
			<li><img src="images/5.png"></li>
		</ul>
		<div id="show"></div>
	</div>
	<input type="button" id="prev" value="上一张">
	<input type="button" id="next" value="下一张">
	<script type="text/javascript">
		var oShow = document.getElementById("show");
		var oBox = document.getElementById("box");
		var prev = document.getElementById("prev");
		var next = document.getElementById("next");
		var oLi = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
		var oImg = oBox.getElementsByTagName("ul")[0].getElementsByTagName("img");
		oShow.iNow = 0;//给oShow 对象添加一个自定义属性保存当前显示的图片
		oShow.urls = [];//保存图片路径
		oShow.off = false;
		for (var i=0;i<5 ;i++ )
		{
			var oDiv1 = document.createElement("div");
			var oDiv2 = document.createElement("div");
			oDiv2.className = 'div2';
			oDiv1.innerHTML = "<em class='em1' style='background-position:0px -"+i*72+"px'></em><span class='span1'></span><em class='em2' style='background-position:0px -"+i*72+"px'></em><span class='span2'></span>";
			oDiv2.innerHTML = "<em class='em1' style='background-position:-525px -"+i*72+"px'></em><span class='span1'></span><em class='em2' style='background-position:-525px -"+i*72+"px'></em><span class='span2'></span>";
			oShow.appendChild(oDiv1);
			oShow.appendChild(oDiv2);
		}
		oLi[0].style.display = "block";
		//获取所有的图片路径
		for (var i=0;i<oImg.length;i++)
		{
			oShow.urls.push(oImg[i].getAttribute("src"));
		}

		prev.onclick = function(){
			if (oShow.off)
			{
				return;//直接返回 后面的代码都不会执行了
			}
			oShow.off = true;
			var iNext = oShow.iNow - 1;
			if (iNext < 0 )
			{
				iNext = oShow.urls.length-1;
			}
			tab(iNext);//切换图片
		}
		next.onclick = function(){
			if (oShow.off)
			{
				return;//直接返回 后面的代码都不会执行了
			}
			oShow.off = true;
			var iNext = oShow.iNow + 1;
			if (iNext >= oShow.urls.length)
			{
				iNext = 0;
			}
			tab(iNext);//切换图片
		}

		function tab(iNext){
			var oEm1 = oShow.getElementsByClassName("em1");
			var oEm2 = oShow.getElementsByClassName("em2");
			var oDiv = oShow.getElementsByTagName("div");
			for (var i=0;i<oEm1.length ; i++)
			{
				//当前的这一张
				oEm1[i].style.backgroundImage = "url("+ oShow.urls[oShow.iNow] +")";
				//后面那一张
				oEm2[i].style.backgroundImage = "url("+ oShow.urls[iNext] +")";
			}
			oShow.style.display = "block";
			//console.log(oShow.iNow);
			oLi[oShow.iNow].style.display = "none";
			//给具体的十个div绑定定时器实现旋转的效果
			for (var i=0;i<oDiv.length ;i+=2 )
			{
				var time = (i+1)*50;
				oDiv[i].style.transform = "rotateX(0deg)";//左边div
				oDiv[i+1].style.transform = "rotateX(0deg)";//右边div
				//具体每个div绑定定时器
				setTimer(oDiv[i],time,"move1");
				setTimer(oDiv[i+1],time,"move2");
			}
			//动画执行完成之后
			setTimeout(function(){
				oShow.iNow = iNext;
				oLi[iNext].style.display = "block";
				oShow.style.display = "none";
				oShow.off = false;
			},(oDiv.length*50+1500));
			
		}
		
		function setTimer(obj,time,name){
			obj.timer = setTimeout(function(){
				//开启定时器之前先清楚定时器
				clearTimeout(obj.timer);
				obj.style.WebkitAnimation = name + " 1.5s";
				obj.style.WebkitTransform = "rotateX(180deg)";
				obj.timer = setTimeout(function(){
					obj.style.WebkitAnimation = "";
					clearTimeout(obj.timer);
					obj.timer = null;
				},1500)
			},time);
		};
	</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跨Android、iOS、鸿蒙多平台框架ArkUI-X

ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具&#xff0c;帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API&#xff0c;就能在Android、iOS、鸿蒙多个平台上提供生动而流畅的用户界面体验。 一…

Nginx深度解析

Nginx是一个开源的高性能Web服务器&#xff0c;广泛用于提供HTTP服务。 它以其高效能、稳定性和低资源消耗而闻名。 Nginx的核心特性 异步非阻塞事件驱动架构&#xff1a;Nginx的主要优势之一是它的异步非阻塞处理方式&#xff0c;这使得它在处理大量并发连接时非常高效。轻量…

Spring 中 HttpServletRequest 作为成员变量是安全的吗?

在使用spring框架开发的时候&#xff0c;经常会在controller类中看到 HttpServletRequest 对象参数&#xff0c;一般我们都是直接使用&#xff0c;但是它是何时、怎么注入到 spring 容器的呢 &#xff1f;另外以成员变量注入的 request 是线程安全的吗 ? Controller public c…

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

前言&#xff1a;项目中需要线下 扫描二维码 进入到小程序指定的页面&#xff0c;二维码中 要动态传递多个参数&#xff0c;接下来看看具体怎么实现&#xff0c;整个过程还比较顺利&#xff0c;特把整个过程中遇到的坑点做以总结。 快速跳转官网文档介绍&#xff1a;扫码打开小…

【数据结构】二叉树(遍历,递归)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​​​ 目录 二叉树遍历规则 前序遍历 ​…

Pure-admin框架 Pure-table中获取所选中的内容的信息

最近在尝试使用Pure-admin框架来进行开发&#xff0c;正好遇到了多选表格需要获取选中项的id的情况&#xff0c;因为平台介绍说是二次封装 element-plus 的 Table &#xff0c;直接拿el-table的方法来试 在table上设置属性ref"multipleTableRef" let idArr [];mult…

使用Python的pygame库实现下雪的效果

使用Python的pygame库实现下雪的效果 关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 先给出效果图&#xff1a; 源码如下&#xff1a; import pygame import random# 初始化pygame pygame.init()# 设置屏幕尺寸 width…

C# 线程间操作无效: 从不是创建控件的线程访问它--多线程操作

我们在用线程操作的时候&#xff0c;可能会出现异常&#xff1a;线程间操作无效: 从不是创建控件richTextBox1的线程访问它。因为windows窗体控件不是线程安全的&#xff0c;如果几个线程操作某一控件的状态&#xff0c;可能会使该控件的状态不一致&#xff0c;出现争用或死锁状…

springBoot项目打包发布

打包 项目代码编写完成后&#xff0c;在pom.xml文件中引用打包的插件&#xff1a; <!-- 打包插件坐标--><build><plugins><!--打包插件--><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-mave…

洗地吸拖一体机什么牌子好?性能超好的洗地机推荐

科技时代的快速发展带来了大量智能清洁家电&#xff0c;其中近年兴起的洗地机为我们的生活带来了极大便利。然而&#xff0c;市面上涌现出众多品牌和型号的洗地机&#xff0c;让人眼花缭乱&#xff0c;难以做出选择。笔者在这里推荐几款性能超好的洗地机推荐&#xff0c;希望能…

137基于matlab的面和线接触的滑块润滑

基于matlab的面和线接触的滑块润滑&#xff0c;基于有限差分法求解面接触滑块润滑的油膜厚度、油膜压力&#xff0c;输出三维可视化结果。程序已调通&#xff0c;可直接运行。 137 matlab油膜压力油膜厚度 (xiaohongshu.com)

在机关单位上班的你,需要掌握这些网络安全知识!

没有网络安全&#xff0c;就没有国家安全。网络安全和保密防护&#xff0c;是机关单位日常工作中不可忽视的重要问题。尤其在涉密单位工作的人员&#xff0c;因工作性质特殊&#xff0c;不仅要了解非涉密网络的安全操作常识&#xff0c;更要重点了解涉密网络的规范行为要点&…

linux docker-compose安装失败解决

1.去github下载到本地 https://github.com/docker/compose/releases/ 2.上传到linux 服务器 mv dokcer-compose-linux-x86_64 /usr/loacal/bin/docker-compose 3.给权限 chmod x /usr/local/bin/docker-compose 4.查看是否安装成功 docker-compose -version 5.卸载 …

鸿蒙原生应用/元服务实战-AGC团队账户

多人及内外结合去开发运营鸿蒙原生应用元服务时&#xff0c;需要用到团队账户&#xff0c;AGC提供了强大的团队角色与权限分工能力。 团队帐号是开发者联盟为实名开发者提供的多个成员帐号登录与权限管理服务。当前团队帐号支持成员参与应用市场&#xff08;付费推广、应用内付…

【Git相关问题】修改代码提交push时的用户名字

最简方法如下&#xff1a; 直接修改Git的用户配置文件 .gitconfig&#xff0c;这个配置文件的路径一般是 C:\Users\本机用户名\.gitconfig 用记事本或编辑器打开&#xff0c;在[user]下即可修改用户名name或邮箱email 参考&#xff1a; 使用Git进行版本控制&#xff0c;不同…

如何实现固定公网地址远程访问本地部署的Termux MySQL数据库

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

实验一 安装和使用Oracle数据库

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

(C语言)冒泡排序

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现buble_sort函数&#xff1b; void buble_sort(int arr[], int sz) {//初始化变量值&#xff1b;int i 0;//嵌套循环冒泡排序&#xff1b;//外层循环&…

Mybatis面试题(一)

MyBatis 面试题 1、什么是 Mybatis&#xff1f; 1、Mybatis 是一个半 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它内部封装了 JDBC&#xff0c;开发时只需要关注 SQL 语句本身&#xff0c;不需要花费精力去处理加载驱动、创建连接、创建statement 等繁杂的过程…

LeetCode 104. 二叉树的最大深度

104. 二叉树的最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1…