Home | 知网云盘

自定义Swal样式

本文将介绍如何通过自定义CSS对Swal组件进行样式调整。Swal是一个轻量级的JavaScript库，常用于创建各种提示消息，如警告框、确认框和输入框等。通过自定义Swal的样式，可以使其更符合项目的需求。

我们需要了解Swal默认的图标和边框样式。在提供的素材中，我们可以看到Swal的错误提示图标(.swal-icon--error)的样式如下：

• border-color: #f27474;
• 使用-webkit-animation和animation属性设置动画效果。
• 包含两个子元素：.swal-icon--error__x-mark和.swal-icon--error__line,分别用于显示叉号和线条。
• .swal-icon--error__x-mark的样式如下：
• position: relative; display: block;
• 使用-webkit-animation和animation属性设置动画效果。
• 包含一个子元素：.swal-icon--error__line--left,用于旋转线条并向左移动。
• .swal-icon--error__line--right,用于旋转线条并向右移动。

我们将详细介绍如何自定义这些样式。

自定义Swal错误图标样式

要自定义Swal错误图标的样式，只需覆盖上述代码中的.swal-icon--error选择器即可。例如，将边框颜色更改为红色：

.swal-icon--error {
border-color: red;
}

自定义Swal错误图标动画效果

要自定义Swal错误图标的动画效果，可以在.swal-icon--error选择器中添加相应的CSS规则。例如，为叉号添加动画效果，使其从左侧旋转至右侧：

@keyframes rotateXMark {
to {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}

.swal-icon--error__x-mark {
/* ... */
position: relative; /* ... */
animation: rotateXMark 0.6s linear forwards; /* ... */
}

类似地，可以为线条添加动画效果，使其在错误图标内部上下移动：

@keyframes animateLine {
to {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}

.swal-icon--error__line {
/* ... */
animation: animateLine 0.6s linear forwards; /* ... */
}