css - 为什么要加before，有何作用？
本文介绍了css - 为什么要加before，有何作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
<style>
.loader {
position: relative;
margin: 0 auto;
width: 100px;/*改变这个值可以改变loading大小*/
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
-o-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1,200;
stroke-dashoffset:0;
-webkit-animation: dash 1.5s ease infinite , color 6s ease infinite;
-o-animation: dash 1.5s ease infinite , color 6s ease infinite;
animation: dash 1.5s ease infinite , color 6s ease infinite;
stroke-linecap: round;
}
@keyframes rotate {
100%{
transform: rotate(360deg);
}
}
@keyframes dash {
0%{
stroke-dasharray: 1,200;
stroke-dashoffset:0;
}
50%{
stroke-dasharray: 89,200;
stroke-dashoffset:-35px;
}
100%{
stroke-dasharray: 89,200;
stroke-dashoffset:-124px;
}
}
@keyframes color {
100%,0%{
stroke: red;
}
40%{
stroke: blue;
}
60%{
stroke: green;
}
90%{
stroke: yellow;
}
}
</style>
</head>
<body>
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" ></circle>
</svg>
</div>
</body>
</html>
这是一个loading的svg图，不理解其中.loader:before 的作用，求大神解答。
解决方案
:before 绑定到loader上的伪元素，可以不要 但是loader样式就得加上高度
这里的before是为了占位，等同于
<div class="loader">
<div class="before">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"></circle>
</svg>
</div>
</div>
.before {
padding-top: 100%;
}这篇关于css - 为什么要加before，有何作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
