CSS3实战——抖动效果的实现_css3抖动

作者：一键难忘520 | 2024-06-30 04:05:30

踩

css3抖动

这几天有项目，其中复习了一下css3的相关知识。其中抖动效果很好玩，不禁想写篇文章，纪念一下。

还是以前说的，通过js动态添加/删除class是一个“不错的”选择。比如今天做的东西：先添加，然后利用setTimeout慢慢消除。这样就实现了“抖动效果”
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS点击按钮-无文字输入框抖动效果</title>
    <style>
        .login-box {
            width: 300px;
            min-width: 300px;
            height: 300px;
            min-height: 300px;
            background-color: white;
            border: 1px solid black;
        }
        .title {
            text-align: center;
            color: cornflowerblue;
        }
        .form-item-wrap {
            width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .form-label {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
        }
        .form-input{
            width: 80%;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
            padding: 5px;
        }
        .form-submit {
            display: block;
            float: right;
            margin-right: 20px;
            color: cornflowerblue;
            background-color: white;
            text-shadow: 1px 1px 2px cornflowerblue;
            border: none;
            outline: none;
            font-size: 20px;
            font-weight: 500;
        }
        .form-submit:hover {
            cursor: pointer;
            font-size: 22px;
        }
        .shake {
            border-color: red;
            animation: shake 800ms ease-in-out;
        }
        @keyframes shake {
        	/* 动画需：“对称”实现 */
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(+2px, 0, 0); }
            30%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(+4px, 0, 0); }
            50% { transform: translate3d(-4px, 0, 0); }
        }
    </style>
</head>
<body>
<div class="login-box">
    <h3 class="title">Login</h3>
    <form name="login_form" id="login_form">
        <div class="form-item-wrap">
            <label for="username" class="form-label">Username</label><br/>
            <input type="text" name="username" id="username" class="form-input" required placeholder="请输入3-5位非数字字符" pattern="[a-zA-Z]{3,5}">
        </div>
        <div class="form-item-wrap">
            <label for="password" class="form-label">Password</label><br/>
            <input type="password" name="password" id="password" class="form-input" required placeholder="Please Enter Password" pattern="[0-9]{6,10}">
        </div>
        <input type="submit" value="Submit" class="form-submit">
    </form>
</div>
<script>
    function shake(elemId) {
        let elem = document.getElementById(elemId);
        if (elem){
            elem.classList.add('shake');
            setTimeout(()=>{ elem.classList.remove('shake') }, 800)
        }
    }
    var submit=document.querySelector('.form-submit');
    window.addEventListener('DOMContentLoaded',function () {
        submit.onclick=function () {
            var u=document.querySelector('#username');
            var su=document.querySelector('#password');
            if(u.validity.valueMissing===true){
                u.setCustomValidity("用户名不能为空！");
                shake('username');
            }else if(u.validity.patternMismatch===true){
                u.setCustomValidity("昵称必须是3-5位非数字字符！");
                shake('username');
            }else{
                u.setCustomValidity("");
            }
            if(su.validity.valueMissing===true){
                su.setCustomValidity("密码不能为空！");
                shake('password');
            }else if(su.validity.patternMismatch===true){
                su.setCustomValidity("密码必须是6-10位数字！");
                shake('password');
            }else{
                su.setCustomValidity("");
            }
            return true;
        }
    })
</script>
</body>
</html>
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

顺便宣传下个人网站：
http://cjxnsb.cn/mxcf/index.html
（哈哈）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/771331