为什么要加before，有何作用？ 财富值64

2016-10-26 13:47发布

站内问答 /
1782 3 4 
<!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 的作用，求大神解答。

3条回答
问尽天下车 - 这个人很懒，什么都没留下
2016-10-26 14:14

:before 绑定到loader上的伪元素，可以不要 但是loader样式就得加上高度
这里的before是为了占位，等同于
<div class="loader">
<div class="before">

一周热门 更多>