Question

我希望使用HTML / CSS / JS来创建类似于this gif的动画类型的东西。我使用:: before和:: after来创建两个半圈＆＃39; border-radius：50％，但我注意到即使删除了两个边框，它仍然会在元素周围逐渐变细。这很难解释，但this is it，我确定你能看出我的意思。

这是一个片段：

＆＃13;

.animation-container {
    height: 100px;
    width: 100px;
    position: relative;
}

.animation-container::before, .animation-container::after {
    content: '';
    display: inline-block;
    position: absolute;
    border: 5px solid red;
    border-radius: 50%;
}

.animation-container::before {
    height: 100px;
    width: 100px;
    top: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.animation-container::after {
    height: 50px;
    width: 50px;
    top: 25px;
    left: 25px;
    border-left: none;
    border-bottom: none;
}

＆＃13;

<!DOCTYPE html>

<html>
    
    <head>
        <title>Tests Page</title>
        <link rel="stylesheet" href="/main.css">
    </head>
    
    <body>
        <div class="animation-container"></div>
    </body>
    
</html>

＆＃13;

Answer 1

您是否有使用动画的特殊原因？在这种情况下，gif实际上比动画更有效很多 ...无论如何，你不能防止逐渐减少，因为这样做会产生逻辑影响，例如：边界半径...

也许你可以使用这样的东西吗？

https://jsfiddle.net/vocfgfjn/1/

HTML：

<div class="box"></div>

CSS：

.box{
  width:100px;
  height:100px;  
  border:solid 5px #000;
  border-color:#000 #000 transparent transparent;
  border-radius: 100px 100px 100px 0;
}

Answer 2

你怎么看待像那样创造你的半圈？

＆＃13;

.half-circle {
  width: 100px;
  height: 100px;
  position: relative;
  border: 5px solid red;
  border-radius: 50%;
  animation: rotateAnim 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.half-circle:after{
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  right: -5px;
  bottom: -5px;
  background: #FFF;
}
@keyframes rotateAnim {
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}

＆＃13;

<div class="half-circle"></div>

＆＃13;

如果只有两边，如何使边界半径停止变得完全圆润？

2 个答案: