无效输入时抖动

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索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

无效输入时抖动

虚拟机中已提供了index.htmlstyle.css

要在输入无效时创建抖动动画,请执行以下步骤:

  1. 使用pattern属性定义一个正则表达式,指定允许的输入。例如,使用[A-Za-z]*仅允许字母。
  2. 使用@keyframes定义一个抖动动画。设置margin-left属性以使输入左右移动。
  3. 使用:invalid伪类将抖动动画应用于输入。
  4. 可选地,为输入添加红色阴影以指示错误。

以下是一个示例代码片段:

<input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />
@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

请点击右下角的“Go Live”以在端口8080上运行Web服务。然后,你可以刷新Web 8080标签页来预览网页。

总结

恭喜你!你已完成“无效输入时抖动”实验。你可以在LabEx中练习更多实验以提升你的技能。