2024-05-27 CSS Only - Input Field with Floating Text Animation | Floating label input css 動態文字標籤 上移至輸入框的左上方

發表於 分類於 閱讀次數：
CSS Only - Input Field with Floating Text Animation | Floating label input css 動態文字標籤 上移至輸入框的左上方

2024-05-27 CSS Only - Input Field with Floating Text Animation | Floating label input css 動態文字標籤 上移至輸入框的左上方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Input Field Label Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="entryarea>">
            <input type="text" required>
            <div class="labelline">Enter your name</div> 
    </div>
</body>

</html>   
1
2
3
4
<!-- Hex Color Code -->
#1c2841
#f0ffff
#66ff00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* Given below is  Google-Fonts CDN line */ 
@import url('https://fonts.googleapis.com/css2family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins',sans-serif;
    box-sizeing: border-box;
}
body{
    display: flex;
    min-height: 100vh;
    justify-content: center; /*水平置中 */
    align-items: center; /*垂直置中 */
    background: #1c2841;
}
.container{
    width: 680px;
}
.entryarea{
    position: relative;
    height: 80px;
    line-height: 80px;
}
input{
    position: absolute;
    width: 100%;
    outline: none;
    font-size: 2.2em;
    padding: 0.30px;
    line-height: 80px;
    border-radius: 10px;
    border: 2px solid #f0ffff;
    background: transparent;
    transition: 0.1s ease;  /* 移動速度及方向 */
    z-index: 1111;
}
.labelline{
    position: absolute;
    font-size: 1.6em;
    color: #f0ffff;
    padding: 0.25px;
    margin: 0.20px;
    background-color: #1c2841;
    transition: 0.2s ease;
}
input:focus , input:valid{
    color: #66ff00;
    border: 4px solid #66ff00;   
}
input:focus + .labelline , input:valid + .labelline{
    color: #66ff00;
    height: 30px;
    line-height: 30px;
    padding: 0.12px;
    transform: translate(-15px, -16px) scale(0.88);/*文字上移 */
    z-index: 1111; /*文字可以層疊在外框上 */
}

文獻連結:
https://www.youtube.com/watch?v=Tdzas-IlKSM&list=PLtSbVlT9kQjn5PSxxYAY5OwMExHKNWKCi&index=7 by
WebKitCoding

…