我正在尝试制作如下所示的加载程序
但我需要有圆形边框和矩形,而不是盒子。这样我就可以将我们公司的 Logo 放置到装载机上。
我尝试再制作一层,这将制作内联半径,并且对于包装器,我设置了border-radius
和overflow:hidden
。
但是,动画看起来很糟糕而且不流畅。
你能帮我让这个动画变得更好吗?或者您是否创建了类似的东西?
更新代码 SASS
我仍在尝试这一点。
#logoLoader
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
margin-left: -125px;
margin-top: -32px;
-webkit-transition: background-color 500ms;
transition: background-color 500ms;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
.logo-image-wrapper
display: inline-block;
position: absolute;
width: 100%;
z-index: 150;
img
width: 100%;
height: auto;
.logo-inline-corner
display: block;
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
background-color: #fff;
border-radius: 5px;
z-index: 130;
margin: 3px;
.logo-background
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 100;
.loader
display: block;
position: absolute;
background-color: #8dc63f;
z-index: 125;
@keyframes slide1
0%
border-top-right-radius: 0;
50%
width: calc(100% - 2px);
margin-left: 0;
99%
border-top-right-radius: 0;
100%
margin-left: 100%;
border-top-right-radius: 50px;
@keyframes slide2
0%
border-top-right-radius: 0;
50%
height: calc(100% - 2px);
margin-top: 0;
99%
border-top-right-radius: 0;
100%
margin-top: 100%;
border-bottom-right-radius: 50px;
@keyframes slide3
0%
border-top-right-radius: 0;
50%
width: calc(100% - 2px);
margin-right: 0;
99%
border-top-right-radius: 0;
100%
margin-right: 100%;
border-bottom-left-radius: 50px;
@keyframes slide4
0%
border-top-right-radius: 0;
50%
height: calc(100% - 2px);
margin-bottom: 0;
99%
border-top-right-radius: 0;
100%
margin-bottom: 100%;
border-top-left-radius: 50px;
HTML
<div id="logoLoader" style="display: none;">
<div class="c4w-logo">
<img src="images/c4w-logo-loader.png" />
</div>
<div class="logo-inline-corner"></div>
<div class="loader" style="left:2px; top:0; height:2px; width:0; animation:slide1 1s linear forwards infinite" ></div>
<div class="loader" style="right:0; top:2px; width:2px; height:0; animation:slide2 1s linear forwards infinite; animation-delay:0.5s"></div>
<div class="loader" style="right:2px; bottom:0; height:2px; width:0; animation:slide3 1s linear forwards infinite"></div>
<div class="loader" style="left:0; bottom:2px; width:2px; height:0; animation:slide4 1sl inear forwards infinite; animation-delay:0.5s"></div>
<div class="logo-background"></div>
</div>
最佳答案
SVG 在这里更合适。只需调整宽度/高度和描边属性的值即可:
svg {
width: 200px;
height: 100px;
margin: 10px;
overflow: visible;
}
svg>rect {
stroke:purple;
fill:transparent;
stroke-dasharray: 130, 150;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
stroke-dashoffset: 280;
}
}
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" height="100%" width="100%" rx="20" ry="20" stroke-width="10"/>
</svg>
但也可以用 CSS 来完成。这是一个没有透明度的想法,其中的技巧是旋转一个仅覆盖边框的元素,以及我们将应用 clip-path
的位置:
.box {
width:200px;
height:100px;
overflow:hidden;
border-radius:20px;
position:relative;
z-index:0;
}
.box:after {
content:"";
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
background:#fff;
border-radius:10px;
}
.box:before{
content:"";
position:absolute;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
background:blue;
clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
animation:rotate 1s linear infinite;
}
@keyframes rotate {
50% {
transform:rotate(90deg) scaleX(0.5) ;
}
100% {
transform:rotate(180deg);
}
}
<div class="box">
</div>
要理解这个技巧,请删除溢出并更改一些颜色:
.box {
width:200px;
height:100px;
border-radius:20px;
position:relative;
z-index:0;
border:1px solid;
margin:50px;
}
.box:after {
content:"";
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
background:rgba(255,255,255,0.4);
border-radius:10px;
}
.box:before{
content:"";
position:absolute;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
background:blue;
clip-path:polygon(0 0,0 100%,100% 0, 100% 100%);
animation:rotate 1s linear infinite;
}
@keyframes rotate {
50% {
transform:rotate(90deg) scaleX(0.5) ;
}
100% {
transform:rotate(180deg);
}
}
<div class="box">
</div>
它也可以在没有 clip-path
和一个简单的矩形的情况下完成:
.box {
width:200px;
height:100px;
overflow:hidden;
border-radius:20px;
position:relative;
z-index:0;
}
.box:after {
content:"";
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
background:#fff;
border-radius:10px;
}
.box:before{
content:"";
position:absolute;
top:-100%;
left:30%;
right:30%;
bottom:-100%;
background:blue;
animation:rotate 1s linear infinite;
}
@keyframes rotate {
50% {
transform:rotate(90deg) scaleX(0.5) ;
}
100% {
transform:rotate(180deg);
}
}
<div class="box">
</div>
关于css - 带圆 Angular 的矩形旋转器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56576512/