(3)扇形导航实现

进阶路

已于 2022-05-17 13:22:48 修改

阅读量190

点赞数

分类专栏：前端之HTML和CSS基础文章标签： css javascript html

于 2022-05-17 13:20:08 首次发布

本文链接：https://blog.csdn.net/Q_999999/article/details/124819343

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建一个旋转动画效果，包括元素的初始和结束状态，以及在元素初次渲染和变换样式时的过渡效果。通过示例代码展示了如何在点击事件中实现图片放大和旋转动画，并强调了在不同变换样式下过渡可能无法触发的问题。文章还探讨了元素的层级、定位和过渡属性的使用技巧。

摘要由CSDN通过智能技术生成

效果图：

注意：

1、过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态

2、元素在初次渲染还没有结束的时候，是没有办法触发过渡的

3、在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 50px;
				height: 50px;
				position: fixed;
				right: 15px;
				bottom: 15px;
			}
			.container > .imgs{
				height: 100%;
			}
			.container > .imgs > img{
				position: absolute;	/*提升层级，img一个比一个层级高，所以图片会叠起来*/
				margin: 4px;
				border-radius: 50%;
				top: 0;	/*解决imgsEle一开始出去的问题*/
				left: 0;
			}
			.container > .home{
				width: 100%;
				height: 100%;
				background: url(img/home.png) no-repeat;
				position: absolute;	/*一旦开启绝对定位，高宽由内容撑开*/
				left: 0;	/*解决imgs高度百分百时home被挤出去问题*/
				top: 0;
				z-index: 1;	/*如果元素没有开启定位，则z-index不起作用*/
				border-radius: 50%;
				transition: 2s;
			}

		</style>
	</head>
	<body>
		<div class="container">
			<div class="imgs">
				<img src="img/clos.png" />
				<img src="img/full.png" />
				<img src="img/open.png" />
				<img src="img/prev.png" />
				<img src="img/refresh.png" />
			</div>
			<div class="home"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var homeEle = document.querySelector(".home");
			var imgsEle = document.querySelectorAll(".container > .imgs > img");
			var flag = true;
			var c = 140;
			/*第二部分*/
			function fn(){
				this.style.transform = "rotate(-720deg) scale(1)";/*放大*/
				this.style.opacity = 1;/*透明度*/
				this.style.transition = "0.3s";
				this.removeEventListener("transitionend", fn);	/*解绑事件*/
			}
			
			for (var i = 0; i < imgsEle.length; i++) {	/*imgsElm里的img都要有放大，此时img还带着第一部分的延迟和rotate*/
				imgsEle[i].onclick = function() {
					this.style.transform = "rotate(-720deg) scale(2)";/*放大*/
					this.style.opacity = 0.5;/*透明度*/
					this.style.transition = "0.5s";/*取消第一部分的延迟*/
					
					/*当点击事件完成时，img还要回到原来状态*/
					/*transitionend监测过渡是否完成*/
					/*一旦绑上事件，就会一直存在，但是我们不需要该事件一直存在，只希望它点击时触发一次，点击完成，该事件就结束，所以在fn中要解绑*/
					this.addEventListener("transitionend", fn);
				};
				
			}
			
			/*第一部分*/
			homeEle.onclick = function() {
				if (flag) {
					this.style.transform = "rotate(-720deg)";
					for (var i = 0; i < imgsEle.length; i++) {
						imgsEle[i].style.transform = "rotate(-720deg) scale(1)";/*出去的时候逆时针转*/
						imgsEle[i].style.transition = "1s " +(i*0.1)+"s";	/*每个图标延迟不一样*/
						imgsEle[i].style.left = -getPoint(c,90*i/(imgsEle.length-1)).left+"px";
						imgsEle[i].style.top = -getPoint(c,90*i/(imgsEle.length-1)).top+"px";
					}
				} else{
					this.style.transform = "rotate(0deg)";
					for (var i = 0; i < imgsEle.length; i++) {
						imgsEle[i].style.transform = "rotate(0deg) scale(1)";
						imgsEle[i].style.transition = "1s " +((imgsEle.length-i-1)*0.1)+"s";	/*每个图标延迟不一样*/
						imgsEle[i].style.left = "0px";
						imgsEle[i].style.top = "0px";
						
					}
				}
				flag=!flag;
			}
			//已知第三边 和 一个角
			function getPoint(c,deg){
				var x =Math.round(c * Math.sin(deg*Math.PI/180));
				var y =Math.round(c * Math.cos(deg*Math.PI/180));
				return {left:x,top:y};
			}	
		}
		/*在绝大部分transform变换样式切换时，如果变换函数的位置、个数不相同也不会触发过渡*/
		/*在一开始点击home，五个图标旋转出去，此时五图标的transform为 rotate(-720deg);
		 *当点击五图标中的一个之后，它的transform为scale(1);
		 * 最后再点击home，五个图标的transform又变为rotate(0deg);
		 * 在这三个过程中，transform变换函数的位置和个数不相同，所以它们的过渡有时不会触发
		 * 所以最终应将imgsEle[i].style.transform的变换函数写成两个
		*/
	</script>
</html>