css-loader@^1.6.1怎么安装

发布网友发布时间：2022-05-14 00:56

我来回答

共2个回答

懂视网时间：2022-05-14 05:17

本篇文章给大家带来的内容是关于如何使用纯CSS实现抛盒子的loader （附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，只有 1 个元素：

<div class="loader"></div>

居中显示：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: teal;
}

画出一根木条：

.loader {
 width: 6em;
 border-bottom: 0.25em solid white;
 font-size: 30px;
 border-radius: 0.125em;
}

用伪元素在其上画出一个盒子：

.loader {
 position: relative;
}

.loader::before {
 content: '';
 position: absolute;
 width: 1em;
 height: 1em;
 border: 0.25em solid white;
 bottom: 0;
 left: 0.5em;
 border-radius: 0.25em;
}

让图案倾斜，形成盒子在坡上的效果：

.loader {
 transform: rotate(-45deg);
 left: 1em;
 top: 1em;
}

接下来制作动画。

让盒子一步步爬坡，爬到坡顶再重爬：

.loader::before {
 animation: push 3s infinite;
}

@keyframes push {
 0% {
 transform: translateX(0);
 }
 
 20%, 25% {
 transform: translateX(1em);
 }

 40%, 45% {
 transform: translateX(2em);
 }

 60%, 65% {
 transform: translateX(3em);
 }

 80% {
 transform: translateX(0);
 }
}

增加盒子在爬坡的过程中的滚动效果：

@keyframes push {
 0% {
 transform: translateX(0) rotate(0deg);
 }
 
 20%, 25% {
 transform: translateX(1em) rotate(calc(90deg * 1));
 }

 40%, 45% {
 transform: translateX(2em) rotate(calc(90deg * 2));
 }

 60%, 65% {
 transform: translateX(3em) rotate(calc(90deg * 3));
 }

 80% {
 transform: translateX(0) rotate(0deg);
 }
}

增加盒子在爬坡过程中的拟人效果：

@keyframes push {
 0% {
 transform: translateX(0) rotate(0deg);
 }

 5% {
 transform: translateX(0) rotate(-5deg);
 }
 
 20%, 25% {
 transform: translateX(1em) rotate(calc(90deg * 1 + 5deg));
 }

 30% {
 transform: translateX(1em) rotate(calc(90deg * 1 - 5deg));
 }

 40%, 45% {
 transform: translateX(2em) rotate(calc(90deg * 2 + 5deg));
 }

 50% {
 transform: translateX(2em) rotate(calc(90deg * 2 - 5deg));
 }

 60%, 65% {
 transform: translateX(3em) rotate(calc(90deg * 3 + 5deg));
 }

 70% {
 transform: translateX(3em) rotate(calc(90deg * 3 - 5deg));
 }

 80% {
 transform: translateX(0) rotate(-5deg);
 }
}

让木条在箱子爬到接近顶点时做抛掷动作：

.loader {
 animation: throw 3s infinite;
 transform-origin: 20%;
}

@keyframes throw {
 0%, 70%, 100% {
 transform: rotate(-45deg);
 }

 80% {
 transform: rotate(-135deg);
 }
}

增加盒子在爬到接近顶点时的掉落效果：

@keyframes push {
 70% {
 transform: translateX(3em) translateY(0) rotate(calc(90deg * 3 - 5deg)) scale(1);
 filter: opacity(1);
 }

 80% {
 transform: translateX(0) translateY(-5em) rotate(-5deg) scale(0);
 filter: opacity(0.5);
 }

 90% {
 transform: translateX(0) translateY(0) rotate(0deg) scale(0);
 }
}

最后，隐藏掉可能超出页面的部分：

body {
 overflow: hidden;
}

大功告成！

热心网友时间：2022-05-14 02:25

css loader
1.通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev
webpack.config.js中
mole: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
探测到.css文件时则使用css-loader和style-loader
》index.css中引入require('./index.css');
3.在webpack打包之后是把样式文件打包进了index.js文件中
这将会导致网页加载过程中js加载造成的网页空白，--加载慢
1）cnpm install --save-dev extract-text-webpack-plugin@2.1.2
https://www.jianshu.com/p/439764e3eff2
（1）***css分离打包设置
var Ex = require('extract-text-webpack-plugin');/
（2）***webpack的 plugins 里面设置抽离出来的CSS文件名叫什么。
new Ex("css/[name].css")
（3）设置loader
loader: Ex.extract({
fallback:'style-loader',
use: "css-loader"
})