对于63.(原65)纯CSS创作一个摇摇晃晃的loader感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解css元素摇摆动画，并且为您提供关于02-初识loader，使用loader加载cs
对于63.(原65)纯 CSS 创作一个摇摇晃晃的 loader感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解css 元素摇摆动画，并且为您提供关于02-初识loader，使用loader加载css、06webpack--css配置和style-loader css-loader的下载、11.纯 CSS 创作一个荧光脉冲 loader 特效、25. 纯 CSS 创作一个慧星拖尾效果的 loader 动画的宝贵知识。
本文目录一览：- 63.(原65)纯 CSS 创作一个摇摇晃晃的 loader（css 元素摇摆动画）
- 02-初识loader，使用loader加载css
- 06webpack--css配置和style-loader css-loader的下载
- 11.纯 CSS 创作一个荧光脉冲 loader 特效
- 25. 纯 CSS 创作一个慧星拖尾效果的 loader 动画
63.(原65)纯 CSS 创作一个摇摇晃晃的 loader（css 元素摇摆动画）
原文地址：https://segmentfault.com/a/1190000015424389
修改后地址：https://scrimba.com/c/cqKv4VCR
HTML code：
<div class="loader"> <span>Loading...</span> </div>
CSS code：
html,body { margin: 0; padding: 0; } /* 设置body的子元素水平垂直居中 */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } /* 设置容器尺寸 */ .loader { position: relative; /* 在此调节font-size可以调节整个loader的大小，前提是不能在后代元素里设置font-size了 */ font-size: 30px; width: 10em; height: 10em; border: 1px solid white; /* 画出组成圆的顶部弧线 */ border-top: 0.3em solid hotpink; border-radius: 50%; /* width、height包括边框、内边距、内容区 */ Box-sizing: border-Box; animation: rotating 2s ease-in-out infinite; --direction: 1; } /* 用伪元素画出组成圆的另外 2 条弧线 */ .loader::before,.loader::after { content: ‘‘; position: absolute; width: inherit; height: inherit; border-radius: 50%; Box-sizing: border-Box; top: -0.2em; } .loader::before { border-top: 0.3em solid dodgerblue; transform: rotate(120deg); } .loader::after { border-top: 0.3em solid gold; transform: rotate(240deg); } /* 设置文字样式 */ .loader span { position: absolute; color: white; width: inherit; height: inherit; text-align: center; line-height: 10em; font-family: sans-serif; animation: rotating 2s linear infinite; --direction: -1; } @keyframes rotating { 50% { transform: rotate(calc(180deg * var(--direction))); } 100% { transform: rotate(calc(360deg * var(--direction))); } }
02-初识loader，使用loader加载css
hello大家好，本节主要讲解的内容是如何使用webpack加载css。
webpack 只能理解 JavaScript 和 JSON 文件。如果要使用webpack处理其他文件，应该怎么办呢？这个时候我们就需要使用loader将其他文件处理成webpack可以理解的文件，我打个比方，loader就像一个翻译官一样，将其他语言像是英语法语西班牙语俄罗斯语等等翻译成我们能听懂的汉语普通话。
那么下面呢，我先演示一下如何使用webpack来加载css文件，
首先，安装对应的loader：
- css-loader
- style-loade
执行命令行 npm install css-loader style-loader -D
等待一会安装完毕，安装完的时候，创建一个style.css文件写样式，
body{
background-color:#369;
}
.test{
color:#963;
font-size:40px;
}
然后在webpack.config.js内进行配置，告诉webpack遇到css文件应该用什么loader来翻译成它可以理解的东西，loader的配置在module:{rules:[]}中写，
test: /\\.css$/, use: [ ''style-loader'', ''css-loader'' ]
test对应的值，是一个字符串或正则表达式，现在这个代码的意思是匹配到以css结尾的文件，就是css文件，当匹配到这类文件之后，使用style-loader和css-loader来处理，loader的执行顺序是从上到下的，当webpack遇到css文件时先使用css-loader处理一下，然后将处理结果传递给style-loader，style-loader会创建一个style标签将内容写进去，然后把结果写到对应的html文件内
打开index.js，引入style.css即可
import ''style.css''
然后给div添加对应的样式
import ''./style.css'';
function createDiv(){
var div = document.createElement(''div'');
div.innerHTML = ''test'';
div.classList.add(''test'');
return div;
}
var ele = createDiv();
document.body.appendChild(ele);
演示一下，运行npm run build 查看结果，检查元素，可以看到对应的效果和css样式
如果你想用css预处理语言，比如sass或less的话，需要在webpack内使用对应loader，那么接下来我演示一下如何使用sass-loader处理scss文件
第一步还是安装对应的loader，npm i -D sass-loader
在安装的时候先写一个test-sass.scss
.scss {
font-size: 30px;
color: #f00;
}
安装完成之后，打开index.js页面，引入test-sass.scss
写入对应的样式
import ''./style.css'';
import ''./test-sass.scss'';
function createDiv(){
var div = document.createElement(''div'');
div.innerHTML = ''test'';
div.classList.add(''scss'');
return div;
}
var ele = createDiv();
document.body.appendChild(ele);
演示一下
06webpack--css配置和style-loader css-loader的下载
本节 loader配置处理css样式 在src下新建css文件夹 在css下创建index.css 在main.js这个入口文件中 引入js模块 和 css杨思表是不同的 在main.js文件中 import './css/index.css'
注意：webpack默认只能打包处理JS类型的文件 无法处理其他的非JS类型的文件 如果处理其他非js类型的文件 需要安装第三方的loader加载器 cnpm i style-loader css-loader -D 需要安装两个加载器 这个凉饿模块处理css 打开webpack.config.js这个文件 在里面新增一个配置的节点，是module他是一个对象，在module这个对象上， 有一个属性rules,这个属性是一个数组，在这个数组中，存放了所有的第三方文件的匹配和处理规则 webpack.config.js文件如下
module:{ //这个节点 用于配置 所有的第三方 加载器 rules:[ 所有第三方模块的匹配规则 { test: /\.css$/,use: ['style-loader','css-loader']} ] } ps==>test中loader的加载规则是从右向左的哦 先加载css-loader 在加载style-loader
11.纯 CSS 创作一个荧光脉冲 loader 特效
原文地址：http://www.voidcn.com/article/p-qggpuniv-bsg.html
HTML代码：
1 <html> 2 <head> 3 <link rel="stylesheet" href="index.css"> 4 </head> 5 <body> 6 <div class="circle"></div> 7 </body> 8 </html>
CSS代码：
1 html, 2 body, 3 .circle{ 4 margin: 0; 5 padding: 0; 6 height: 100%; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 11 } 12 /* 画出中间的实心圆 */ 13 /* :root是一个CSS伪类，它匹配文档的根元素 – <html>元素。 14 w3 相关地址 http://www.w3school.com.cn/cssref/css_selectors.asp */ 15 :root { 16 --innerRadius: 2em; 17 } 18 .circle { 19 width: calc(var(--innerRadius) * 2); 20 height: calc(var(--innerRadius) * 2); 21 background-color: lime; 22 border-radius: 50%; 23 /* 画出圆环 */ 24 Box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white,25 0 0 0 var(--innerRadius) lime; 26 position: relative; 27 } 28 /* 用伪元素 ::before 画出动画用到的圆环 ； 用伪元素 ::after 再画出一个动的圆环*/ 29 .circle::before,30 .circle::after { 31 content: ‘‘; 32 position: absolute; 33 width: calc(var(--innerRadius) * 2 * 2); 34 height: calc(var(--innerRadius) * 2 * 2); 35 border: 2px solid lime; 36 border-radius: 50%; 37 animation: pulse 2s linear infinite; 38 } 39 .circle::after { 40 animation-delay: 1s; 41 } 42 /* 增加动画效果 43 优化动画——增加渐淡和弹性效果 */ 44 @keyframes pulse { 45 from { 46 /* scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。*/ 47 transform: scale(1); 48 filter: opacity(0.9); 49 } 50 51 to { 52 transform: scale(2); 53 filter: opacity(0); 54 } 55 }
25. 纯 CSS 创作一个慧星拖尾效果的 loader 动画
原文地址：https://segmentfault.com/a/1190000014916281
简化地址：https://codepen.io/pen/?editors=1100
HTML 代码：
<div class="loader">
<div class="face">
<div class="circle"></div>
</div>
<div class="face">
<div class="circle"></div>
</div>
</div>CSS 代码：
html,
body,
.loader {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.loader {
width: 200px;
height: 200px;
position: relative;
}
.loader .face {
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: var(--color);
border-left-color: var(--color);
animation: animate 3s linear infinite;
}
.loader .face:nth-child(1) {
width: 100%;
height: 100%;
--color: gold;
--deg: 0deg;
}
.loader .face:nth-child(2) {
width: 70%;
height: 70%;
--color: lime;
--deg: 180deg;
animation-direction: reverse;
}
.loader .face .circle {
position: absolute;
width: 50%;
height: 1px;
top: 50%;
left: 50%;
background-color: transparent;
transform: rotate(calc(var(--deg) - 45deg));
transform-origin: left;
}
.loader .face .circle::before {
position: absolute;
top: -5px;
right: -5px;
content: '''';
width: 10px;
height: 10px;
background-color: var(--color);
border-radius: 50%;
box-shadow: 0 0 20px var(--color),
0 0 40px var(--color),
0 0 60px var(--color),
0 0 80px var(--color),
0 0 100px var(--color),
0 0 0 5px rgba(255, 255, 0, 0.1);
}
@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
关于63.(原65)纯 CSS 创作一个摇摇晃晃的 loader和css 元素摇摆动画的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于02-初识loader，使用loader加载css、06webpack--css配置和style-loader css-loader的下载、11.纯 CSS 创作一个荧光脉冲 loader 特效、25. 纯 CSS 创作一个慧星拖尾效果的 loader 动画的相关知识，请在本站寻找。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
