js中flex系统

<!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">
		*{
    
    padding: 0px;margin: 0px;}
		html
		{
    
    
			font-weight: 200;
		}

		.panels
		{
    
    
			display: flex;
		}
		.panel
		{
    
    

			min-height: 100vh;
			overflow: hidden;
			color: white;
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			line-height: 33.3vh;
			justify-content: center;
			background-position: center;
			 transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s; 


		}
	.panel1 {
    
     background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 {
    
     background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
    .panel3 {
    
     background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
    .panel4 {
    
     background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
    .panel5 {
    
     background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
    .panel>p
    {
    
    
    	/*border: 2px solid red;*/
    	flex: 1;/*每一个p占据三分之一的panel的空间.不然的话,你删除flex:1就知道了*/
    }
    .panel>p:first-child
    {
    
    
    	transform: translateY(-100%);
    }
    .panel.open-active>p:first-child
    {
    
    
    	transform: translateY(0);
    }
    .panel>p:last-child
    {
    
    
    	transform: translateY(100%);
    }
    .panel.open-active>p:last-child
    {
    
    
    	transform: translateY(0);
    }
     
    .panel p
    {
    
    
    	font-family:'Amatic SC', cursive;
    	text-transform: uppercase;
    	font-size: 2em;/*1em=16px*/


    }
    .panel p:nth-child(2)
    {
    
    
    	font-size: 4em;
    }
 .panel.open {
    
    
      flex: 5;/*放大至5倍*/
      font-size:40px;
    }


	</style>
</head>
<body>
	
  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
<script type="text/javascript">
	const panels = document.querySelectorAll('.panel');
	function toggleOpen() {
    
    //点击放大 还原
		this.classList.toggle("open");//toggle切换的功能
	}
	function  toggleActive(e)
	{
    
    //动画完毕后就是是哦展开后然后是文字的出来与进去.
		if(e.propertyName.includes("flex"))//属性如果包括flex的话.
		{
    
    
			this.classList.toggle("open-active");//toggle切换的功能
		}
	}//toggle事件完了之后是还原哦.
	panels.forEach(panel=>panel.addEventListener('click',toggleOpen));
	panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
</script>
</body>
</html>
猜你喜欢
