新增第201个小实例：左右摇晃的输入框

2023-01-14 16:35:11 +08:00 · 2023-01-14 16:35:11 +08:00 · 3a2fe42f9b
parent c92ae104a5
commit 3a2fe42f9b
3 changed files with 98 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -208,6 +208,7 @@
 198. HTML5+CSS3+JS小实例：网页手电筒
 199. HTML5+CSS3小实例：不一样的超链接下划线
 200. HTML5+CSS3+JS小实例：网站实现一键切换暗色主题
+201. HTML5+CSS3小实例：左右摇晃的输入框

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/201/201.css
+++ b/code/201/201.css
@ -0,0 +1,80 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #6eb6ff;
+}
+.container{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    color: #fff;
+}
+.container h1{
+    width: 260px;
+}
+.container input{
+    width: 260px;
+    height: 50px;
+    color: #000;
+    border: 2px solid #fff;
+    background-color: #fff;
+    border-radius: 25px;
+    outline: none;
+    text-indent: 15px;
+    font-size: 18px;
+    margin: 20px 0;
+}
+.container input::placeholder{
+    color: #aaa;
+}
+.container button{
+    width: 260px;
+    height: 50px;
+    border: 2px solid #fff;
+    background: none;
+    border-radius: 25px;
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+    /* 过渡效果 */
+    transition: 0.2s;
+}
+.container button:hover{
+    background-color: #fff;
+    color: #6eb6ff;
+    cursor: pointer;
+}
+/* 输入框验证失败时 */
+.container input:invalid{
+    color: #ff5f5f;
+    border-color: #ff5f5f;
+    background-color: #ffdfdf;
+    /* 执行动画：动画名 时长 加速后减速 重复执行2次 */
+    animation: shake 0.2s ease-in-out 2;
+}
+
+/* 定义动画 */
+@keyframes shake {
+    0%{
+        margin-left: 0;
+    }
+    25%{
+        margin-left: 8px;
+    }
+    50%{
+        margin-left: 0;
+    }
+    75%{
+        margin-left: -8px;
+    }
+    100%{
+        margin-left: 0;
+    }
+}
--- a/code/201/201.html
+++ b/code/201/201.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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>左右摇晃的输入框</title>
+    <link rel="stylesheet" href="201.css">
+</head>
+<body>
+    <div class="container">
+        <h1>请验证</h1>
+        <input type="text" placeholder="请输入验证码" pattern="[0-9]*">
+        <button>下一步</button>
+    </div>
+</body>
+</html>