You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
2.0 KiB
46 lines
2.0 KiB
// Spinning Icons
|
|
// --------------------------
|
|
/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix} 会在编译时被替换为具体的值。
|
|
这个选择器用于设置具有特定前缀的元素的旋转动画。 */
|
|
.#{$fa-css-prefix}-spin {
|
|
/* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 2 秒，无限循环，线性过渡。 */
|
|
-webkit-animation: fa-spin 2s infinite linear;
|
|
/* 标准的 CSS 动画属性，设置同样的动画效果。 */
|
|
animation: fa-spin 2s infinite linear;
|
|
}
|
|
|
|
/* 同样使用插值语法的选择器，用于设置具有特定前缀的元素的脉冲动画。 */
|
|
.#{$fa-css-prefix}-pulse {
|
|
/* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 1 秒，无限循环，分为 8 步过渡。 */
|
|
-webkit-animation: fa-spin 1s infinite steps(8);
|
|
/* 标准的 CSS 动画属性，设置同样的动画效果。 */
|
|
animation: fa-spin 1s infinite steps(8);
|
|
}
|
|
|
|
/* 定义一个名为'fa-spin'的关键帧动画，用于在 WebKit 浏览器内核中实现旋转效果。 */
|
|
@-webkit-keyframes fa-spin {
|
|
/* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
/* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */
|
|
100% {
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
/* 定义一个名为'fa-spin'的关键帧动画，用于在标准的 CSS 环境中实现旋转效果。 */
|
|
@keyframes fa-spin {
|
|
/* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
/* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */
|
|
100% {
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
} |