时间戳

首页 > 解决方案 > 为什么easy-in-out不适用于联系表格部分？

html - 为什么easy-in-out不适用于联系表格部分？

问题描述

我不明白为什么缓入和缓出不适用于联系表格。它适用于标题，但不适用于联系表格。我的联系表格在一个名为联系表格的 div 中。stackoverflow 说我需要添加更多细节，但我不确定要写什么，所以我只是想写一些随机的东西。请帮忙谢谢

这是html代码

<div class="contact-form">

  <form id="contact-form" method="post" actipn="">
     <input name="name" type="text" class= "form-control" placeholder="Your Name" required><br><br>
     <input name="email" type="text" class= "form-control" placeholder="Your Email" required><br><br>
     <textarea name="message" class="form-control" cols="20" rows="6" placeholder="Message"></textarea><br><br>
     <input type="submit" class="submit" value="SEND MESSAGE">

  </form>
</div>

这是css代码

header{
  font-size: 40px;
  font-family: sans-serif;
  color: white;
   position: absolute;
   text-align: center;
   top:20%;
   display: inline;
   transition: all 1s ease-in-out;
}

.contact-form{

    position: absolute;
    top: 40%;
transition: all 1s ease-in-out;

}




.form-control{
    width: 500px;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid blueviolet;
    color: blueviolet;
    font-size: 18px;

}


input{
    height: 45px;
}
.submit{
    position: relative;
    background-color: blueviolet;
    font-size: 20px;
    position: relative;
    letter-spacing: 2px;
    border: none;
    width: auto;

}

.submit:hover{

    background-color: white;
    cursor: pointer;
}

标签： htmlcss

解决方案

/* defaults */

html,
body {
	height: 100%;
}

html {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 24px;
}

*,
*:before,
*:after {
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	margin: 0;
	line-height: 1.5;
	background-color: #e7e7e7;
	font-family: Roboto, Helvectica, Arial, sans-serif;
	color: #333;
}


/* headers */

h1 {
	font-family: "Roboto Slab", Times, "Times New Roman", serif;
	font-size: 2em;
}


/* form elements */

label {
	display: block;
}

select,
textarea,
input {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}

input[type=submit] {
	border: none;
	cursor: pointer;
}


/* vertical align snippet */

.va-cont {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
}

.va-inn {
	display: table-cell;
	vertical-align: middle;
}


/* styles */

.form-container {
	width: 80%;
	padding: 10px;
	margin: auto;
}

.form-heading {
	margin-top: 0;
	margin-bottom: 1.2em;
	text-align: center;
}

.form-heading-highlight {
	color: #009688;
}

.form-row {
	position: relative;
	margin-top: 30px;
}

.form-label {
	position: absolute;
	top: 17px;
	left: 20px;
	color: #999;
	cursor: text;
   transition: all 1s ease-in-out;
}

.form-textbox,
.form-submit {
	width: 100%;
	padding: 20px;
}

.form-textbox {	
	box-shadow: inset 0 0 10px rgba(0,0,0,.1);
}

.form-textbox:focus ~ .form-label,
.form-textbox:valid ~ .form-label {
	top: -1.5em;
	left: 0;
	font-size: .8em;
	color: inherit;
	cursor: pointer;
}

.form-submit {
	background-color: #009688;
	font-weight: 700;
	color: #fff;
	transition: opacity .15s ease-in-out 0s;
}

.form-submit:hover {
	opacity: .75;
}


/* media queries */

@media only screen and (max-width:1366px) {
	.form-container {
		width: 70%;
	}
}

@media only screen and (max-width:1024px) {
	body {
		font-size: .85em;
	}
	.form-container {
		width: 80%;
	}
}

@media only screen and (max-width:768px) {
	body {
		font-size: .7em;
	}
	.form-container {
		width: 90%;
	}
}

@media only screen and (max-width:480px) {
	.form-container {
		width: 100%;
	}
}
<div class="va-cont">
	<div class="va-inn">
		<form onsubmit="" class="form-container">
			<h1 class="form-heading">
				<span class="form-heading-highlight">CSS transitions</span><br>Form label placeholders
			</h1>
			<div class="form-row">
				<input type="text" id="form-email" class="form-textbox" required>
				<label for="form-email" class="form-label">Email address</label>
			</div>
			<div class="form-row">
				<input type="password" id="form-password" class="form-textbox" required>
				<label for="form-password" class="form-label">Password</label>
			</div>
			<div class="form-row">
				<input type="submit" value="Let's go!" class="form-submit">
			</div>
		</form>
	</div>
</div>

您正在寻找这种过渡吗？

推荐阅读