仿製了一個酷炫的彈框效果

來自這裏

這是ejsoon製作的彈框示例

你好!

代碼如下

	<style>
.ejdialog {
	z-index: 777777;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	position: fixed;
}
.popup__close{
	z-index: 1200;
	width: 2rem;
	height: 2rem;
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
}
.ejdialog_contain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
.ejdialog_hide {
	display: none;
}
.ejdialog_before {
	content: "";
	box-sizing: border-box;
	width: 100%;
	background-color: #aff;
	position: fixed;
	left: 0;
	top: 50%;
	z-index: 700;
}
.ejdialog_contain {
	position: fixed;
	z-index: 1200;
}
.ejdialog_after {
	width: 0;
	height: 2px;
	background-color: #aff;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1px;
	z-index: 9900;
}
/*
   animation
 */
.ejdialog_before {
	will-change: height, top;
	animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}
.ejdialog_after{
	will-change: width, opacity;
	animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
}
  @keyframes line-animation{
	  0%{
		  width: 0;
		  opacity: 1;
	  }
	  99%{
		  width: 100%;
		  opacity: 1;
	  }
	  100%{
		  width: 100%;
		  opacity: 0;
	  }  
  }
  @keyframes open-animation{
	  0%{
		  height: 0;
		  top: 50%;
	  }
	  100%{
		  height: 100vh;
		  top: 0;
	  }
  }
  .ejdialog_contain {
	  animation: fade .5s ease-out 1.3s both;
  }
  @keyframes fade{
	  0%{
		  opacity: 0;
	  }
	  100%{
		  opacity: 1;
	  }
  }
.ejdialog_content { padding: 12%;}
	</style>
	<button type="button" onclick="toggleejdialog()">彈個框</button>
	<div class="ejdialog ejdialog_hide">
		<div class="ejdialog_before">
		</div>
		<div class="ejdialog_contain">
			<div class="ejdialog_content">
				<h2>這是ejsoon製作的彈框示例</h2>
				<p>
					你好!
				</p>
			</div>
			<div class="popup__close" onclick="toggleejdialog()"></div>
		</div>
		<div class="ejdialog_after">
		</div>
	</div>
	<script>
		function toggleejdialog() {
			document.querySelector(".ejdialog").classList.toggle("ejdialog_hide");;
		}
	</script>

Leave a Comment