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
1.9 KiB
46 lines
1.9 KiB
// Animated Icons
|
|
// --------------------------
|
|
|
|
/* 这里是一个动态的 CSS 选择器，@{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);
|
|
}
|
|
} |