问题：

如何在文本周围添加一个小框？

轩辕实

2023-03-14

我有以下代码:

null

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(1000).fadeOut('slow');
    }
});

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
   display: flex;
    justify-content: center;
    align-items: center;
}


.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 3s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">            
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
        <span></span>
    </div>
</div>

null

我想在它周围添加一个小框，并且为了更好地向大家展示我在寻找什么样的输出，那么最后我想要这样:

所以，我现在缺少的是与黑色，我不希望ox填充，它应该与上面的图片大约相同的高度和宽度。把它看作是一个站点的预加载器。在页面的中间，一个带有徽标的小型/中型框显示在其内部，如上面所示。

注意:动画应该在盒子里面工作，而不应该去盒子外面，所以当你运行上述代码时的动画应该发生在黑盒子里。我只是在寻找帮助如何准确地设置u的尺寸的盒子就像它在图片中显示。稍后我将调整测量值，但现在我正在寻找要显示的框的输出。

我试着用同样的逻辑，就像之前有人问过类似的问题一样，但是没有用，而且给了我一个黑屏，这不是我想要的。我希望整个屏幕都是，但是图像的这个背景框，如上图所示，是黑色的。

预期产出:

动画应该仍然在框内完美运行，并且正如您所看到的，框在屏幕的中间，并且屏幕有一个

共有2个答案

皇甫雨华

2023-03-14

只需添加一个背景和一个边框即可:

svg {
  background:#000;
  border:20px solid;
}

全码

null

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(1000).fadeOut('slow');
    }
});

css prettyprint-override">* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
   display: flex;
    justify-content: center;
    align-items: center;
}

svg {
  background:#000;
  border:20px solid;
}

.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 3s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">            
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
        <span></span>
    </div>
</div>

湛鸿

2023-03-14

您在 div...上设置了黑色背景。并将svg缩放到 (2/3)。

null

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(2000).fadeOut('slow');
    }
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap");

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-file {
  background-color: black;  /* added */
  overflow: hidden;
}

.svg-file path {
  fill: transparent;
  stroke-width: 3;
  stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
  stroke-dasharray: 550;
  stroke-dashoffset: 0;
}

.svg-file.z-logo path {
  animation: animate-zlogo 3s linear infinite;
}

svg {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
  transform: scale(0.66);  /* Changed */
}

.svg-file h2 {
  font-family: "Roboto", cursive;
  transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
  font-size: 3em;
  color: #044d77;
}

.svg-file span {
  animation: dots 2.5s steps(6, end) infinite;
  font-size: 5em;
  display: block;
  transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
  background-color: rgb(5, 46, 80);
  width: 8px;
  height: 5px;
}
/* Not used 
@keyframes fadein-fadeout {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
*/
@keyframes animate-zlogo {
  0% {
    stroke-dashoffset: -50;
  }

  20% {
    stroke-dashoffset: 550;
    fill: transparent;
  }

  40% {
    fill: transparent;
    stroke-dashoffset: 1100;
  }

  60% {
    stroke-dashoffset: 1100;
    fill: #05f7f9;
  }

  80% {
    stroke-width: 0;
    fill: #05f7f9;
  }

  100% {
    /* stroke-dashoffset: 0; */
    stroke-width: 3;
    fill: transparent;
  }
}

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
  <div class="svg-file z-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
      <g id="H">
        <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" />
      </g>
    </svg>
    <span></span>
  </div>
</div>

类似资料：

如何在圆形imageview周围添加阴影

主要活动。xml 这是一张圆形的照片。xml: 我尝试了一些阴影效果的代码，但它不起作用。
如何在JButton的文本周围获得边框

我正在尝试为类（Java）制作一种棋盘。我们的老师想让我们把棋盘上的每个方块都做成一个按钮，他给了我们一个按钮应该是什么样子的想法。空方块显然需要是纯黑色或纯白色。当方块上有一块时，问题就出现了。我们的老师想让我们用文本来记录哪些方块上有哪些块，他想让文本是黑色还是白色取决于它是谁的块。由于我们不能在白色背景上放置白色文本，他建议当一个方块上有一块时，我们将方块的颜色改为灰色。我不是粉丝。有没有可
如何在opencv python中的图像周围添加边框

问题内容：如果我有如下图像，如何在图像周围添加边框，以使最终图像的整体高度和宽度增加，而原始图像的高度和宽度保持原样在中间。问题答案：下面的代码向原始图像的所有四个侧面添加大小为10像素的恒定边框。对于颜色，我假设您要使用背景的平均灰度值，该值是根据图像底部两行的平均值计算得出的。抱歉，编码有些困难，但是显示了一般的操作方法，并且可以适应您的需求。如果将底部和右侧的bordersize值
在JPanel中的每个元素周围添加边框

我有一个JPanel，我在网格的内部添加了25个JPanel。我希望每个面板周围都有一个边框，以便您可以清楚地区分每个元素。填充也可以。我向电路板添加面板的方式如果我尝试添加边框，它将应用于包含元素的较大面板。 {GridLayout实验布局=new GridLayout（5,5）； } 如何在每个元素周围添加边框。是否需要更改将面板添加到网格的方式？
如何在打印的字符串周围添加“”引号？

问题内容：我想在Java中打印反引号。但是如何打印呢？预期的操作：“嗨” ..... 问题答案：因为双引号分隔字符串值，所以您自然必须对它们进行转义以编写文字双引号，但是您可以这样做，而不必像这样转义：此处，双引号字符（）已被编码为值。我发现这种样式比“笨拙”的反斜杠方法更容易阅读。但是，这种方法只能在附加单个字符常量时使用，因为“字符”（当然）就是一个字符。
如何添加数据从一个文本文件到ComboBox在JavaFX？

我在场景生成器中创建了一个组合框，我想用文本文件中的数据填充他（例如。Text.txt）：公共类ToDoListController实现初始化{ 如何做到这一点？非常感谢你！两个解决方案：1。 @FXML私有组合框事件选择器； } 2.

如何在文本周围添加一个小框？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档