这个网站的样式表包含几个不同的CSS类,用于创建一个错误图标和相关的动画。以下是对每个类的简单介绍:
.swal-icon–error { border-color: #f27474; -webkit-animation: animateErrorIcon .5s; /* Safari / animation: animateErrorIcon .5s; / 浏览器通用 */ }
.swal-icon–error__x-mark { position: relative; display: block; -webkit-animation: animateXMark .5s; /* Safari / animation: animateXMark .5s; / 浏览器通用 */ }
.swal-icon–error__line { position: absolute; height: 5px; width: 47px; background-color: #f27474; display: block; top: 37px; border-radius: 2px; }
.swal-icon–error__line–left { -webkit-transform: rotate(45deg); /* Safari / transform: rotate(45deg); / 浏览器通用 */ left: 17px; }
.swal-icon–error__line–right { -webkit-transform: rotate(-45deg); /* Safari / transform: rotate(-45deg); / 浏览器通用 */ right: 17px; }
这些样式被应用于SweetAlert2弹出窗口的错误图标上,通过使用CSS的-webkit-
前缀来确保在旧版Safari浏览器中的兼容性。动画用于给错误图标添加一个视觉效果,使其看起来更加生动。