Прямоугольный блесна с закругленными углами - PullRequest
Новая
       17

Прямоугольный блесна с закругленными углами

2 голосов
/ 13 июня 2019

Я пытаюсь создать загрузчик, который будет выглядеть следующим образом на

CodePen

Но мне нужно иметь округленные границы и прямоугольник, а не прямоугольник.Поэтому я смогу разместить логотип нашей компании на загрузчике.

Я попытался сделать еще один слой, который будет иметь линейный радиус, и на обертке, я установил 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>

1 Ответ

2 голосов
/ 13 июня 2019

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