【css】sass实现loading动画

最新推荐文章于 2023-08-07 19:45:44 发布

a堅強的泡沫

最新推荐文章于 2023-08-07 19:45:44 发布

阅读量416

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/weixin_43973415/article/details/114977609

版权

前端面试专栏收录该内容

30 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用sass</title>
		<link href="./sass.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="loading">
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		    <div class="loading-item"></div>
		</div>
	</body>
</html>

index.scss

.loading {
	// em相对长度单位，根据元素的字体大小来定的。
	// 如果把某个元素的font-size设为16px，那么1em就等于16px，2em就是32px等等。
    $centerRadius: 1em;
    $itemWidth: .5em;
    $itemHeight: .2em;
    $width: $centerRadius + $itemWidth * 2; // 2em
    $height: $width; // 2em
    width: $width; // 2em
    height: $height; // 2em
    position: relative; // 相对定位
    .loading-item {
        width: $itemWidth; // 0.5em
        height: $itemHeight; // 0.2em
        margin-top: $itemHeight / 2 * -1; // -0.1em
        margin-left: $centerRadius / 2; // 0.5em，使 .loading-item 向右移动0.5em
        top: 50%;
        left: 50%; // 使 .loading-item 左边框 距离浏览器左边50% 
        position: absolute; // 绝对定位
        background-color: #d1d1d5;
        transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2); // -0.5em 0.1em，分别是上面的 margin-top 和 margin-left 值 的相反数
        border-radius: 1px;
		
		// animation制作动画步骤：①首先用关键帧声明动画 ②再用animation调用该关键帧来实现动画
        @for $i from 1 through 12 {
			// 连体符&表示当前所在元素loading-item
			// 通过 #{} 插值语句可以在选择器或属性名中使用变量
            &:nth-child(#{$i}) {
				// rotate:2d旋转,单位deg，正数是顺时针旋转，负数是逆时针旋转
                transform: rotate(($i - 1) * 30deg);
				// 依次表示：动画名称 持续时间  播放方式linear（动画从头到尾的速度一样） 循环次数infinite（无限次循环播放）
                animation: loading-item 1s linear infinite #{-1 + $i / 12}s;
            }
        }
		// @at-root 默认会跳出选择器嵌套
        @at-root {
			// 关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。
			// 百分比跟随的花括号里面的代码，代表此时对应的样式。
            @keyframes loading-item{
                0% {
					// opacity设置透明程度，从 0.0 （完全透明）到 1.0（完全不透明）。
                    opacity: 1;
                }
                @for $i from 1 through 11 { 
                    #{$i / 12 * 100}% {
                        opacity: 1 - $i / 12;
                    }
                }
                100% {
                    opacity: 1;
                }
            }
        }
    }
}

// animation属性的值:

// 1）animation-name：指定一个关键帧动画的名字，由@keyframes声明。

// 当值为none时（默认值），将没有任何动画效果，其可以用于覆盖任何动画。

// 2）animation-duration：动画持续时间，单位为s或ms，一般使用秒。

// 3）animation-timing-function：动画的播放方式函数：linear（动画从头到尾的速度一样）、ease（默认。动画以低速开始，然后加快，在结束前变慢）、ease-in（动画以低速开始）等

// 4）animation-delay：动画开始之前的延迟时间。

// 5）animation-iteration-count：指定动画的循环次数。

// 取值一般为整数，默认值为1，即只播放一次，如果取值为infinite，动画将会无限次地播放。

// 6）animation-direction：动画的播放方向。

// 默认值为normal，即动画每次循环都向前播放，取值为alternate时，动画播放为偶数次则向前播放，为奇数次则反方向播放，例如一个反复的弹跳动画。。。

// 7）animation-play-state：用来控制动画的播放状态。

// 主要值有两个：running和paused。running为默认值，可以通过paused将正在播放的动画停止，可以通过running将暂停的动画播放。

// 8）animation-fill-mode：用来设置动画的时间外属性。

// 其用四个值：none、forwards、backwards和both。

// 默认值为none，表示动画正常开始，结束后样式回到初始样式（animation属性之外的样式）

// 取值为forwars时，动画结束后，样式保持为最后一帧的样式（100%时）。

// 取值为backwards时，当有delay属性时，可以迅速将第一帧的样式应用到动画元素，而不是开始动画时才将第一帧的样式应用到动画元素，当然，delay为0时看不出效果。

// 取值为both时，让动画元素同时有forwards和backws两种属性效果。

a堅強的泡沫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】sass实现loading动画

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用sass</title> <link href="./sass.css" rel="stylesheet"/> </head> <body> <div class="loading"> <div class
复制链接

扫一扫