<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????button{
????????????width:?150px;
????????????height:?40px;
????????????font:?20px?/?40px?"微軟雅黑";
????????????position:?absolute;
????????????left:?50%;
????????????top:?50%;
????????????transform:?translate(-50%,-50%);
????????????border-radius:?10px;
????????????background:?lightcoral;
????????????color:?#fff;
????????????border:?2px?solid?rgb(185,?86,?86);
????????????outline:?none;
????????}
????????aside{
????????????width:?100vw;
????????????height:?50px;
????????????font:?22px?/?50px?"微軟雅黑";
????????????background:?rgba(0,0,0,.5);
????????????color:?#fff;
????????????text-align:?center;
????????????transform:?translateY(-50px);
????????????transition:?.5s;
????????}
????</style>
</head>
<body>
????<aside>請(qǐng)輸入姓名后再提交</aside>
????<button>
????????提交
????</button>
????<script>
????????var?btn?=?document.querySelector('button');
????????var?aside?=?document.querySelector('aside');
????????btn.onclick?=?function(){
????????????aside.style.transform?=?'translateY(0px)';
????????????setTimeout(function(){
????????????????aside.style.transform?=?'translateY(-50px)';
????????????},1000);
????????}
????</script>
</body>
</html>
