Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um einen adaptiven Titel-Floating-Effekt zu erzielen (Codebeispiel).
Dieser Artikel zeigt anhand von Codebeispielen, wie Sie in CSS adaptive Titel-Floating-Effekte erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Effektanzeige:
Quellcode-Anzeige:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现自适应标题浮动效果</title> <style> body { background-color:#FAFAFA; } input[type="text"] { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; height:-webkit-calc(3em + 2px); height:calc(3em + 2px); margin:0 0 1em; padding:1em; border:1px solid #cccccc; border-radius:1.5em; background:#fff; resize:none; outline:none; } input[type="text"][required]:focus { border-color:#00bafa; } input[type="text"][required]:focus + label[placeholder]:before { color:#00bafa; } input[type="text"][required]:focus + label[placeholder]:before,input[type="text"][required]:valid + label[placeholder]:before { -webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transform:translate(0,-1.5em) scale(0.9,0.9); -ms-transform:translate(0,-1.5em) scale(0.9,0.9); transform:translate(0,-1.5em) scale(0.9,0.9); } input[type="text"][required]:invalid + label[placeholder][alt]:before { content:attr(alt); } input[type="text"][required] + label[placeholder] { display:block; pointer-events:none; line-height:2.3em; margin-top:-webkit-calc(-3em - 2px); margin-top:calc(-3em - 2px); margin-bottom:-webkit-calc((3em - 1em) + 2px); margin-bottom:calc((3em - 1em) + 2px); } input[type="text"][required] + label[placeholder]:before { content:attr(placeholder); display:inline-block; margin:0 -webkit-calc(1em + 2px); margin:0 calc(1em + 2px); padding:0 2px; color:#898989; white-space:nowrap; -webkit-transition:0.3s ease-in-out; transition:0.3s ease-in-out; background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ffffff)); background-image:-webkit-linear-gradient(top,#ffffff,#ffffff); background-image:linear-gradient(to bottom,#ffffff,#ffffff); -webkit-background-size:100% 5px; background-size:100% 5px; background-repeat:no-repeat; background-position:center; } </style> </head> <body> <div style="width:400px;height:100px;margin:50px auto"> <form> <input required="" type="text"> <label alt="请输入用户名" placeholder="名称"></label> </form> </div> </body> </html>
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um einen adaptiven Titel-Floating-Effekt zu erzielen (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!