CSS animation - HTML/CSS

Question

I have the following code:我有以下代码：

 /* Contact Form */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { opacity: 0.9; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST" novalidate> <label for="firstname">First Name</label> <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate.:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

I basically want to add an animation where I want to add an animation on the input fields.我基本上想添加一个 animation 我想在输入字段上添加一个 animation 。 Basically, I want my expected output to be like this:基本上，我希望我的预期 output 是这样的：

 * { --input-height: 3rem; } section { height: 100vh; width: 100vw; display: grid; place-content: center; }.input-container input { height: var(--input-height); width: 80vw; font-size: 2rem; }.input-container { position: relative; display: grid; place-items: center start; }.input-container label { position: absolute; left: 1rem; font-size: 1.5rem; color: rgb(90, 90, 90); background-color: white; transition-duration: 0.5s; }.input-container input:focus~label { position: absolute; font-size: 0.7rem; top: -0.6rem; padding: 0.2em; left: 0.5rem; color: rgb(0, 81, 255); background-color: white; transition-duration: 0.2s; z-index: 2; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <form action=""> <div class="input-container"> <input type="text" name="" id="my-input"> <label for="my-input">hello world</label> </div> </form> </section> </body> </html>

As you can see, when you click the input field the text shortens and gets aligned on top of the input field.如您所见，当您单击输入字段时，文本会缩短并在输入字段顶部对齐。 I would like this but with the contact form I have above.我想要这个，但使用上面的联系表。 How would I incorporate this code above into the contact form code I sent before?我如何将上面的代码合并到我之前发送的联系表单代码中？ I tried using the same logic but got stuck since my code that I sent at the very top is a bit different than what I sent directly above.我尝试使用相同的逻辑但卡住了，因为我在最顶部发送的代码与我直接在上面发送的代码有点不同。 Any suggestions on how I can accomplish this task?关于如何完成这项任务的任何建议？ Any help will be highly appreciated!任何帮助将不胜感激！

Answer 1

I'd use some code from webdevtrick.com and morioh.com, I changed the code to use vanilla JavaScript instead我会使用 webdevtrick.com 和 morioh.com 中的一些代码，我将代码更改为使用 vanilla JavaScript

 /** Code By Webdevtrick ( https://webdevtrick.com ) **/ const inputs = document.querySelectorAll("input"); inputs.forEach((input) => { input.addEventListener("focusin", (e) => { e.target.previousElementSibling.classList.add("active"); }); input.addEventListener("focusout", (e) => { e.target.previousElementSibling.classList.remove("active"); }); });

 /** Code By Webdevtrick ( https://webdevtrick.com ) **/ * { letter-spacing: 3px; font-family: "Alegreya Sans SC", sans-serif; } body { color: white; background-color: #f05855; } h1 { font-size: 60px; margin: 0px; padding: 0px; text-align: center; } div.main { width: 700px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); vertical-align: middle; } div.main div { position: relative; margin: 40px 0; } label { position: absolute; top: 0; font-size: 30px; margin: 10px; padding: 0 10px; background-color: #f05855; -webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out; transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out; }.active { top: -25px; font-size: 20px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; } input[type="text"] { width: 100%; padding: 20px; border: 2px solid white; font-size: 20px; font-weight: 800; background-color: #f05855; color: white; } input[type="text"]:focus { outline: none; }

 <:DOCTYPE html> <.--Code By Webdevtrick ( https.//webdevtrick:com )--> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS Input Label Animation | Webdevtrick.com</title> <link href="https.//fonts?googleapis.com/css.family=Alegreya+Sans+SC&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="main"> <h1>CSS Label Animation</h1> <div> <label for="FirName">First Name</label> <input id="FirName" type="text" class="styl" /> </div> <div> <label for="LasName">Last Name</label> <input id="LasName" type="text" class="styl" /> </div> <div> <label for="Messag">Your Message</label> <input id="Messag" type="text" class="styl" /> </div> </div> <script src="script.js"></script> </body> </html>

Answer 2

You can try this, I have modified your template with the animation.你可以试试这个，我用 animation 修改了你的模板。

 * { --input-height: 3rem; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.row:after { content: ""; display: table; clear: both; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; } section { height: 100vh; width: 100vw; display: grid; place-content: center; }.input-container input { height: var(--input-height); width: 80vw; font-size: 2rem; }.input-container { position: relative; display: grid; place-items: center start; margin-top: 6px; margin-bottom: 16px; width:50%; }.input-container label { position: absolute; left: 1rem; font-size: 1.5rem; color: rgb(90, 90, 90); background-color: white; transition-duration: 0.5s; }.input-container input:focus~label { position: absolute; font-size: 0.7rem; top: -0.6rem; padding: 0.2em; left: 0.5rem; color: rgb(0, 81, 255); background-color: white; transition-duration: 0.2s; z-index: 2; } input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { opacity: 0.9; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> </br></br> <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align.center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form! </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST" novalidate> <div class="input-container"> <input type="text" id="first name" name="firstname" required> <label for="firstname">First Name</label> </div> <div class="input-container"> <input type="text" id="lastname" name="lastname" required> <label for="lastname">Last Name</label> </div> <input type="submit" value="Submit"> </form> </div> </div> </div> </section> </body>

CSS animation - HTML/CSS

问题描述

2 个解决方案

解决方案1
0 2021-12-29 04:18:48

解决方案2
0 2021-12-29 11:40:06

CSS animation - HTML/CSS

问题描述

2 个解决方案

解决方案1 0 2021-12-29 04:18:48

解决方案2 0 2021-12-29 11:40:06

解决方案1
0 2021-12-29 04:18:48

解决方案2
0 2021-12-29 11:40:06