Css animation in html inputs


how to make this kind of animation i really needed

It’s not quite clear what the animation is here. Can you be more specific? Or can you point us to a page that has similar animation to what you want to do?

1 Like

when you hover your mouse, then than yellow background and dotted line they are stick together and became one

I’m no graphic artist or CSS wizard but I was able to get something working in about 15 minutes. Though I didn’t include the floating label, just the tilted background. Before I post my solution, do you have any ideas on how you might solve this? My solution makes use of the CSS transform property using the rotate function.

honestly sir, i dont have any idea this is was my problem yesterday

i just want to impress our pm so i came here to ask cause this problem makes my progress slow

I find it hard to believe that you have absolutely no ideas on how to do this, unless you are an absolute beginner perhaps.

We don’t generally write code for people in this forum. We help people find solutions, but we expect the people we are helping to do their fair share of the work. So I really don’t want to just give you my solution without you at least making some effort to do this. I already gave you a big hint. Here’s another one. The background color doesn’t have to be on the input itself.

Please think about this a little more and describe in words how you might do this? It doesn’t have to be perfect the first time. We can help you get there.

2 Likes

i already figure it out tnx, I’am from java and spring boot yes I read this before but for like me came from other language is not easy to familiarize all those stuff

but thank you sir, all I need is “rotation” word then suddenly i just like flash back in my head