我如何将我的边界动画与文字结合

发布于 2025-02-02 20:40:14 字数 3607 浏览 3 评论 0原文

我正在使用这种边界启示 https://codepen.io/florincornea/pen/pen/pen/pen/pen/kkpvryo 但是我试图通过将其包裹在bootstrap中来响应它，但是现在它坚持在左边，我似乎无法居中，

这是我的演示：

.circle-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
}

.icon {
  position: absolute;
  color: #fff;
  font-size: 55px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
  animation: spin 2s linear infinite;
}

.success {
  background-color: #2e3192;
  border: 2.5px dashed #2e3192;
}

.error {
  background-color: #CA0B00;
  border: 2.5px dashed #CA0B00;
}

.warning {
  background-color: #F0D500;
  border: 2.5px dashed #F0D500;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.page-wrapper {
  background-color: #eee;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all">

<div class="our-process center-align tinted-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <h2>Our Process</h2>
            </div>
            <div class="row">
               <div class="page-wrapper d-md-flex">
    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
             <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Assessor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Surveyor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>installation</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Post Inspection Visit</h5>
    </div>
</div>
            </div>
        </div>
    </div>
</div>

我已经链接到我的网站的bootstrap，所以

这不是问题的图像，现在我试图将蓝色圆圈与下面的文本保持一致： “在此处输入图像说明”

原文

I'm using this border animation https://codepen.io/FlorinCornea/pen/KKpvRYo but I'm trying to make it responsive by wrapping it in bootstrap however now its sticking to the left and I cant seem to center it

This is my DEMO:

.circle-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
}

.icon {
  position: absolute;
  color: #fff;
  font-size: 55px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
  animation: spin 2s linear infinite;
}

.success {
  background-color: #2e3192;
  border: 2.5px dashed #2e3192;
}

.error {
  background-color: #CA0B00;
  border: 2.5px dashed #CA0B00;
}

.warning {
  background-color: #F0D500;
  border: 2.5px dashed #F0D500;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.page-wrapper {
  background-color: #eee;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all">

<div class="our-process center-align tinted-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <h2>Our Process</h2>
            </div>
            <div class="row">
               <div class="page-wrapper d-md-flex">
    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
             <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Assessor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Surveyor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>installation</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Post Inspection Visit</h5>
    </div>
</div>
            </div>
        </div>
    </div>
</div>

I have bootstrap linked to my site so that's not the issue

Here's an image of what it looks like now i am trying to center align the blue circles with the text that's below them:
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

睫毛溺水了 2025-02-09 20:40:14

对于Bootstrap 4：

当您使用Bootstrap时，我添加了3个Bootstrap类：

d-md-flex（= display：explay：flex on Mediad Screen上）page> page-wrapper
text-center在您的col-md-3
mx-center（= circe> circle-wrapper）上

d-md-flex可以通过row mx-0替换

为Bootstrap 3：

您只需要创建缺失的CSS类：

@media (min-width: 768px){
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }
}
.mx-auto{
  margin-right:auto !important;
  margin-left:auto !important;
}

在大屏幕上检查是否，应该以中心为中心。

.circle-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
}

.icon {
  position: absolute;
  color: #fff;
  font-size: 55px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
  animation: spin 2s linear infinite;
}

.success {
  background-color: #2e3192;
  border: 2.5px dashed #2e3192;
}

.error {
  background-color: #CA0B00;
  border: 2.5px dashed #CA0B00;
}

.warning {
  background-color: #F0D500;
  border: 2.5px dashed #F0D500;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.page-wrapper {
  background-color: #eee;
  align-items: center;
  justify-content: center;
}
/************************************/
/**     BOOTSTRAP 4 CSS ADDED      **/
/************************************/
@media (min-width: 768px){
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }
}
.mx-auto{
  margin-right:auto !important;
  margin-left:auto !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-wrapper d-md-flex">
    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
             <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Assessor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Surveyor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>installation</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Post Inspection Visit</h5>
    </div>
</div>

For Bootstrap 4:

As you use bootstrap, I add 3 bootstrap classes:

d-md-flex (= display:flex on medium screen) on your page-wrapper
text-center on your col-md-3
mx-center (= margin horizontal auto) on your circle-wrapper

The d-md-flex could be replace by row mx-0

For bootstrap 3:

You just need to create the missing css classes:

@media (min-width: 768px){
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }
}
.mx-auto{
  margin-right:auto !important;
  margin-left:auto !important;
}

Check that on large screen and it should be centered.

.circle-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
}

.icon {
  position: absolute;
  color: #fff;
  font-size: 55px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
  animation: spin 2s linear infinite;
}

.success {
  background-color: #2e3192;
  border: 2.5px dashed #2e3192;
}

.error {
  background-color: #CA0B00;
  border: 2.5px dashed #CA0B00;
}

.warning {
  background-color: #F0D500;
  border: 2.5px dashed #F0D500;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.page-wrapper {
  background-color: #eee;
  align-items: center;
  justify-content: center;
}
/************************************/
/**     BOOTSTRAP 4 CSS ADDED      **/
/************************************/
@media (min-width: 768px){
  .d-md-flex {
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
  }
}
.mx-auto{
  margin-right:auto !important;
  margin-left:auto !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-wrapper d-md-flex">
    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
             <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Assessor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Surveyor's Visit</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>installation</h5>
    </div>

    <div class="col-md-3 text-center">
        <div class="circle-wrapper mx-auto">
            <div class="success circle"></div>
            <div class="icon">
              <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
        <h5>Post Inspection Visit</h5>
    </div>
</div>

回复收藏 0 原文

~没有更多了~