Question

首先，对非常具体的问题感到抱歉。我在CSS还不是很擅长，我需要一个代码帮助。

我想让内圈透明，而不会失去边框的渐变效果。我该怎么办？

我有这个旋转加载器（参见代码片段）

    .spin-loader {
      border-radius: 50%;
      display: inline-block;
      height: 20px;
      width: 20px;
      position: relative;
      animation: spin .675s linear 0s infinite normal;
      background: #5090bd;
      margin-top: 18px;
      margin-left: 205px;
    }
    
    .spin-loader:before {
    	content: "";
        display: block;
        position: absolute;
        border-radius: 0 90px 90px 0;
        height: 20px;
        width: 50%;
        top: 0; right: 0;
        z-index: 1;
        background: #405060;  
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#5090bd), to(#405060));
    	background-image: -webkit-linear-gradient(top, #5090bd, #405060);
    	background-image: -moz-linear-gradient(top, #5090bd, #405060);
    	background-image: -ms-linear-gradient(top, #5090bd, #405060);
    	background-image: -o-linear-gradient(top, #5090bd, #405060);
    	background-image: linear-gradient(to bottom, #5090bd, #405060);
    	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5090bd, endColorstr=#405060);
      }
    
    .spin-loader:after {
    	content: "";
        display: block;
        position: absolute;
        border-radius: 80%;
        height: 16px;
        width: 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background: #405060;
      }
    
     /* Safari */
    @-webkit-keyframes spin {
    	to {
    		transform: rotate(360deg);
    	}	
    }
    
    @keyframes spin {
    	to {
    		transform: rotate(360deg);
    	}
    }

<!DOCTYPE html>
<html>
<body>

<div class="spin-loader"></div>

</body>
</html>

谢谢！

Answer 1

你无法使这个旋转加载器透明，因为有一些技巧可以降低旋转条纹的不透明度，如果没有完全覆盖这个带有背景的加载器就无法完成。您可以尝试查看删除或更改background的{{1}}时会发生什么。

使这个旋转装载器透明

1 个答案: