简介
在本实验中,我们将探索CSS动画和伪类,以创建输入验证效果。具体来说,我们将使用关键帧和:invalid
伪类在无效输入上创建抖动动画。本实验将帮助你提高CSS技能,并学习如何为网页添加动态且引人入胜的效果。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"])
css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"])
css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"])
css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"])
css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"])
css/BasicConceptsGroup -.-> css/selectors("Selectors")
css/BasicStylingGroup -.-> css/colors("Colors")
css/CoreLayoutGroup -.-> css/box_model("Box Model")
css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding")
css/DynamicStylingGroup -.-> css/animations("Animations")
css/CSSPreprocessorsGroup -.-> css/mixins("Mixins")
subgraph Lab Skills
css/selectors -.-> lab-35237{{"无效输入时抖动"}}
css/colors -.-> lab-35237{{"无效输入时抖动"}}
css/box_model -.-> lab-35237{{"无效输入时抖动"}}
css/margin_and_padding -.-> lab-35237{{"无效输入时抖动"}}
css/animations -.-> lab-35237{{"无效输入时抖动"}}
css/mixins -.-> lab-35237{{"无效输入时抖动"}}
end