圆角矩形旋转器 [英] Rectangle spinner with rounded corners

问题描述

我正在尝试使加载器看起来像

I am trying to make loader which will look like this on

CodePen

但是我需要有圆角边框和矩形，而不是盒子.这样我就可以将我们公司的徽标放到装载机上.

But I need to have rounded borders, and rectangle, not a box. So I will be able to place the logo of our company to the loader.

我试图再做一层，将内联半径设置为半径，然后将border-radius和overflow: hidden设置为包装器.

I tried to make one more layer, which will be making inline radius and to the wrapper, I set border-radius and overflow: hidden.

但是，动画看起来很恐怖而且不流畅.

But, the animation looks horrible And isn't smooth.

可以请您帮我做个更好的动画吗?还是您创建了类似的东西?

Can you please help me, to make this animation better? Or did you create something similar?

更新密码

我仍在尝试.

#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 would be the more suitable here. Simply adjust the value of width/height and stroke properties:

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:

But it can also be done with CSS. Here is an idea without transparency where the trick is to rotate an element that will cover only the borders and where we will apply 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>

要了解该技巧，请消除溢出并更改一些颜色:

To understand the trick, remove the overflow and change some coloration:

.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和一个简单的矩形来完成:

It can also be done without clip-path and a simple rectangle:

.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>

这篇关于圆角矩形旋转器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！