点击下拉菜单,显示动画形式的图形,代码效果呈现

韩眀

已于 2022-05-22 14:14:19 修改

阅读量271

点赞数 1

文章标签：动画 css css3 javascript html

于 2022-05-22 01:21:21 首次发布

本文链接：https://blog.csdn.net/qq2981118661/article/details/124905898

版权

这个示例展示了如何使用HTML和CSS创建动画图形。当鼠标悬停在按钮上时，会出现下拉菜单，选择不同的选项可以展示不同形状的动画：三角形、圆形和正方形。代码通过CSS动画实现了图形的变换效果，如边框旋转和形状过渡。

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

点击下拉菜单,显示动画形式的图形,代码效果呈现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>著作权归韩明所有</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.daohang{
				width: 100%;
				/* background-color: aqua; */
				height: 100px;
				position: fixed;
				
			}
			li{
				list-style: none;
			}
			.daohang .xilaianniu{
				width: 200px;
				height: 50px;
				background-color: black;
				margin-left: 20px;
				color: white;
				border: none;
				box-shadow:0px 0px 10px 10px powderblue;
				/* margin-top: 20px; */
				position: relative; 
				left: 230px;
				top: 40px;
				border-radius: 10px;
				/* display: none; */
				
			}
			.daohang .xilaianniu:hover{
				background: skyblue;
			}
			
			.daohang .oneul li{
				margin-left: 40px;
				background-color: aquamarine;
				width: 200px;
				height: 50px;
				margin-top: 5px;
				text-align: center;
				line-height:3;
				border-radius: 10px;
			}
			
			.daohang .oneul li:hover{
				background-color: darkcyan;
			}
			.daohang .oneul{
				display: none;
				position: relative;
				top: 60px;
				left: 210px;
			}
			
			.daohang .oneul li{
				float: left;
			}
				
			.show{
				position: relative;
				top: 200px;
				box-shadow:0px 0px 10px 10px black;
				width: 1000px;
				height: 500px;
				border: 1px solid white;
				margin: auto;
			}
			#tuxing{
				animation: move 3s;
				animation-fill-mode:forwards;
				
			}
			
			#yuanxing{
				animation: yuanxing 3s;
				animation-fill-mode:forwards;
			}
			
			#sanjiaoxing{
				animation: sanjiaoxing 3s;
				animation-fill-mode:forwards;
			}
			body{
					overflow: hidden;
				}
				
			#mom{
				z-index: -10000;
			}
			
			@keyframes move {
			  from{
				  width: 0px;
				  height: 0px;
			  }
			  to{
				  margin: auto;
				  margin-top: 150px;
				  /* background-color: green; */
				  border: 2px solid red;
				  border-radius: 4px;
				  width: 200px;
				  height: 200px;
				  
			  }
			}
			
			
			@keyframes sanjiaoxing {
			  from{
				  width: 0px;
				  height: 0px;
			  }
			  to{
				 margin: auto;
				 width: 0px;
				 height: 0px;
				 margin-top: 200px;
				 border-top: 80px solid transparent;
				 border-left: 80px solid transparent;		
				 border-right: 80px solid transparent;	
				 border-bottom: 80px solid #ff0000;
			
								 
				}
			}
			
			
			@keyframes yuanxing {
			  from{
				  width: 0px;
				  height: 0px;
			  }
			  to{
			    width: 0px;
			    height: 0px;
				margin: auto;
				margin-top: 150px;	
				width: 200px;
				height: 200px;			
				border: 2px solid red;
				/* 圆的半径为盒子的一般 */			
				border-radius: 50%;
			  }
			}
			
			.tubiao{
				width: 200px;
				height: 40px;
				position: relative;
				left: 600px;
				background-color: navajowhite;
			}
			.tubiao table{
				display: none;
			}
			
			.div1{
				animation: iv1 3s;
				animation-fill-mode:forwards;
			
			}
			
				
			.div2{
				animation: iv2 3s;
				animation-fill-mode:forwards;
			}
			
			@keyframes iv1 {
			  from{
				  width: 0px;
				  height: 0px;
			  }
			  to{
			  width:200px;
			  height:200px;	
			  /* 总共360° */
			  transform:rotate(45deg);
			  border-top:1px solid red;
			  border-left:1px solid red;
			  /* 
			  	
			  	第一个参数是上边距
			  	第二个参数是右边距
			  	第三个参数是下边距
			  	第四个参数是左边距
			  	
			  	左右浮动决定了左右边距是否有效
			  	默认情况下一般div都是左浮动,这个时候
			  	设置右边距就会没有效果
			  	float: right; 
			   */
			  margin:200px 0px 100px 400px;
			  }
			}
			
			@keyframes iv2 {
			  from{
				  width: 0px;
				  height: 0px;
			  }
			  to{
			   width:280px;
			   height:200px;
			   transform:rotate(0deg);
			   position: relative;
			   left: 361px;
			   bottom: 202px;
			   border-top:1px solid red;
			  }
			}
		</style>
	</head>
	<body>
        
		<div class="daohang">
			<button class="xilaianniu">鼠标经过我选择图形</button>
			<ul class="oneul">
				<li class="li1">三角形</li>
				<li class="li2">圆形</li>
				<li class="li3">正方形</li>
				<li class="li3">取消选择</li>
			</ul>
		</div>
		
		<!-- <div class="tubiao">
			<p>鼠标经过我选择边框图标</p>
			<table border="1" class="tubiaotable">
			    <tr>
			        <td>row 1, cell 1</td>
			        <td>row 1, cell 2</td>
			    </tr>
			    <tr>
			        <td>row 2, cell 1</td>
			        <td>row 2, cell 2</td>
			    </tr>
			</table>
		</div> -->
		
		<div class="show">
			<div id="tuxing">
				
			</div>
			
			<div class="div1"></div>
			
			<div class="div2"></div>
			
			<div id="yuanxing">
				
			</div>
		</div>
		

	
		
	</body>
	<script>
		var btn=document.querySelector(".xilaianniu");
		var ul=document.querySelector(".oneul");
		var tuxing=document.querySelector("#tuxing");
		var yuanxing=document.querySelector("#yuanxing");
		var tubiaotable=document.querySelector(".tubiaotable");
		var tubiao=document.querySelector(".tubiao");
		var div1=document.querySelector(".div1");
		var div2=document.querySelector(".div2");
		
		
		tuxing.style.display='none';
		yuanxing.style.display='none';
		div1.style.display='none';
		div2.style.display='none';
		
		
		// tubiao.οnmοuseοver=function(){
		// 	tubiaotable.style.display='block';
		// }
		
		
		btn.onmousemove=function(){
			ul.style.display="block";
		}

		ul.children[0].onclick=function(){
			tuxing.style.display='none';
			yuanxing.style.display='none';
			div1.style.display='block';
			div2.style.display='block';
			ul.style.display="none";
		}
		
		ul.children[1].onclick=function(){
			tuxing.style.display='none';
			div1.style.display='none';
			div2.style.display='none';
			yuanxing.style.display='block';
			ul.style.display="none";
		}
		ul.children[2].onclick=function(){
			div1.style.display='none';
			div2.style.display='none';
			yuanxing.style.display='none';
			tuxing.style.display='block';
			ul.style.display="none";
		}
		
		ul.children[3].onclick=function(){
			ul.style.display="none";
		}


		
	</script>
</html>