文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将剩余空闲空间中心的DIV元素与BootstraV5.1对齐

问如何将剩余空闲空间中心的DIV元素与BootstraV5.1对齐
EN

Stack Overflow用户
提问于 2021-10-10 09:51:29
回答 1查看 59关注 0票数 0

我是一个完全新手的前端开发，但我试图建立我的网站展示我的Blockchain的项目。

现在，我正试图在剩余的自由空间的垂直中心对齐“技术就是我的激情”这一文本。

如何通过引导V5.1实现这一点？

是否有可能像下面的图片那样得到一个广义的答案？

​

​

代码片段

​

代码语言：javascript
复制
/*--- basic styling ---*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Hack, monospace !important;
    background-color: #0f0f0f !important;
}

.owner {
        color: #F4364C;
        font-size: 1.2vw;
}

/*--- glitch effect ---*/
.glitch {
      color: #F4364C;
      position: relative;
      font-size: 4vw !important;
}

.glitch::before {
      color: #F4364C;
      position: absolute;
      content: attr(data-text);
      top: 0vh;
      left: 0.3vw;
      width: 100%;
      height: 100%;
      text-shadow: -1px 0 #FFD700;
      background: #0f0f0f;
      overflow: hidden;
      animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
    
.glitch::after {
      color: #F4364C;
      position: absolute;
      content: attr(data-text);
      top: 0vh;
      right: 0.3vw;
      width: 100%;
      height: 100%;
      text-shadow: -1px 0 #C0C0C0;
      background: #0f0f0f;
      overflow: hidden;
      animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
    
@-webkit-keyframes glitch-anim-1 {
      0% {
            -webkit-clip-path: inset(37% 0 1% 0);
            clip-path: inset(37% 0 1% 0);
      }
      5% {
            -webkit-clip-path: inset(46% 0 40% 0);
            clip-path: inset(46% 0 40% 0);
      }
      10% {
            -webkit-clip-path: inset(99% 0 1% 0);
            clip-path: inset(99% 0 1% 0);
      }
      15% {
            -webkit-clip-path: inset(91% 0 6% 0);
            clip-path: inset(91% 0 6% 0);
      }
      20% {
            -webkit-clip-path: inset(11% 0 37% 0);
            clip-path: inset(11% 0 37% 0);
      }
      25% {
            -webkit-clip-path: inset(97% 0 1% 0);
            clip-path: inset(97% 0 1% 0);
      }
      30% {
            -webkit-clip-path: inset(24% 0 56% 0);
            clip-path: inset(24% 0 56% 0);
      }
      35% {
            -webkit-clip-path: inset(20% 0 30% 0);
            clip-path: inset(20% 0 30% 0);
      }
      40% {
            -webkit-clip-path: inset(89% 0 8% 0);
            clip-path: inset(89% 0 8% 0);
      }
      45% {
            -webkit-clip-path: inset(36% 0 60% 0);
            clip-path: inset(36% 0 60% 0);
      }
      50% {
            -webkit-clip-path: inset(5% 0 62% 0);
            clip-path: inset(5% 0 62% 0);
      }
      55% {
            -webkit-clip-path: inset(9% 0 3% 0);
            clip-path: inset(9% 0 3% 0);
      }
      60% {
            -webkit-clip-path: inset(50% 0 21% 0);
            clip-path: inset(50% 0 21% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(68% 0 15% 0);
            clip-path: inset(68% 0 15% 0);
      }
      75% {
            -webkit-clip-path: inset(47% 0 49% 0);
            clip-path: inset(47% 0 49% 0);
      }
      80% {
            -webkit-clip-path: inset(90% 0 3% 0);
            clip-path: inset(90% 0 3% 0);
      }
      85% {
            -webkit-clip-path: inset(97% 0 3% 0);
            clip-path: inset(97% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(45% 0 29% 0);
            clip-path: inset(45% 0 29% 0);
      }
      95% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      100% {
            -webkit-clip-path: inset(46% 0 12% 0);
            clip-path: inset(46% 0 12% 0);
      }
}
    
@keyframes glitch-anim-1 {
      0% {
            -webkit-clip-path: inset(37% 0 1% 0);
            clip-path: inset(37% 0 1% 0);
      }
      5% {
            -webkit-clip-path: inset(46% 0 40% 0);
            clip-path: inset(46% 0 40% 0);
      }
      10% {
            -webkit-clip-path: inset(99% 0 1% 0);
            clip-path: inset(99% 0 1% 0);
      }
      15% {
            -webkit-clip-path: inset(91% 0 6% 0);
            clip-path: inset(91% 0 6% 0);
      }
      20% {
            -webkit-clip-path: inset(11% 0 37% 0);
            clip-path: inset(11% 0 37% 0);
      }
      25% {
            -webkit-clip-path: inset(97% 0 1% 0);
            clip-path: inset(97% 0 1% 0);
      }
      30% {
            -webkit-clip-path: inset(24% 0 56% 0);
            clip-path: inset(24% 0 56% 0);
      }
      35% {
            -webkit-clip-path: inset(20% 0 30% 0);
            clip-path: inset(20% 0 30% 0);
      }
      40% {
            -webkit-clip-path: inset(89% 0 8% 0);
            clip-path: inset(89% 0 8% 0);
      }
      45% {
            -webkit-clip-path: inset(36% 0 60% 0);
            clip-path: inset(36% 0 60% 0);
      }
      50% {
            -webkit-clip-path: inset(5% 0 62% 0);
            clip-path: inset(5% 0 62% 0);
      }
      55% {
            -webkit-clip-path: inset(9% 0 3% 0);
            clip-path: inset(9% 0 3% 0);
      }
      60% {
            -webkit-clip-path: inset(50% 0 21% 0);
            clip-path: inset(50% 0 21% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(68% 0 15% 0);
            clip-path: inset(68% 0 15% 0);
      }
      75% {
            -webkit-clip-path: inset(47% 0 49% 0);
            clip-path: inset(47% 0 49% 0);
      }
      80% {
            -webkit-clip-path: inset(90% 0 3% 0);
            clip-path: inset(90% 0 3% 0);
      }
      85% {
            -webkit-clip-path: inset(97% 0 3% 0);
            clip-path: inset(97% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(45% 0 29% 0);
            clip-path: inset(45% 0 29% 0);
      }
      95% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      100% {
            -webkit-clip-path: inset(46% 0 12% 0);
            clip-path: inset(46% 0 12% 0);
      }
}
    
@-webkit-keyframes glitch-anim-2 {
      0% {
            -webkit-clip-path: inset(35% 0 4% 0);
            clip-path: inset(35% 0 4% 0);
      }
      5% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      10% {
            -webkit-clip-path: inset(37% 0 13% 0);
            clip-path: inset(37% 0 13% 0);
      }
      15% {
            -webkit-clip-path: inset(86% 0 2% 0);
            clip-path: inset(86% 0 2% 0);
      }
      20% {
            -webkit-clip-path: inset(37% 0 22% 0);
            clip-path: inset(37% 0 22% 0);
      }
      25% {
            -webkit-clip-path: inset(36% 0 4% 0);
            clip-path: inset(36% 0 4% 0);
      }
      30% {
            -webkit-clip-path: inset(85% 0 10% 0);
            clip-path: inset(85% 0 10% 0);
      }
      35% {
            -webkit-clip-path: inset(40% 0 13% 0);
            clip-path: inset(40% 0 13% 0);
      }
      40% {
            -webkit-clip-path: inset(6% 0 69% 0);
            clip-path: inset(6% 0 69% 0);
      }
      45% {
            -webkit-clip-path: inset(6% 0 11% 0);
            clip-path: inset(6% 0 11% 0);
      }
      50% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      55% {
            -webkit-clip-path: inset(70% 0 9% 0);
            clip-path: inset(70% 0 9% 0);
      }
      60% {
            -webkit-clip-path: inset(23% 0 71% 0);
            clip-path: inset(23% 0 71% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(74% 0 8% 0);
            clip-path: inset(74% 0 8% 0);
      }
      75% {
            -webkit-clip-path: inset(72% 0 23% 0);
            clip-path: inset(72% 0 23% 0);
      }
      80% {
            -webkit-clip-path: inset(71% 0 9% 0);
            clip-path: inset(71% 0 9% 0);
      }
      85% {
            -webkit-clip-path: inset(52% 0 3% 0);
            clip-path: inset(52% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(42% 0 46% 0);
            clip-path: inset(42% 0 46% 0);
      }
      95% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      100% {
            -webkit-clip-path: inset(55% 0 4% 0);
            clip-path: inset(55% 0 4% 0);
      }
}
    
@keyframes glitch-anim-2 {
      0% {
            -webkit-clip-path: inset(35% 0 4% 0);
            clip-path: inset(35% 0 4% 0);
      }
      5% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      10% {
            -webkit-clip-path: inset(37% 0 13% 0);
            clip-path: inset(37% 0 13% 0);
      }
      15% {
            -webkit-clip-path: inset(86% 0 2% 0);
            clip-path: inset(86% 0 2% 0);
      }
      20% {
            -webkit-clip-path: inset(37% 0 22% 0);
            clip-path: inset(37% 0 22% 0);
      }
      25% {
            -webkit-clip-path: inset(36% 0 4% 0);
            clip-path: inset(36% 0 4% 0);
      }
      30% {
            -webkit-clip-path: inset(85% 0 10% 0);
            clip-path: inset(85% 0 10% 0);
      }
      35% {
            -webkit-clip-path: inset(40% 0 13% 0);
            clip-path: inset(40% 0 13% 0);
      }
      40% {
            -webkit-clip-path: inset(6% 0 69% 0);
            clip-path: inset(6% 0 69% 0);
      }
      45% {
            -webkit-clip-path: inset(6% 0 11% 0);
            clip-path: inset(6% 0 11% 0);
      }
      50% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      55% {
            -webkit-clip-path: inset(70% 0 9% 0);
            clip-path: inset(70% 0 9% 0);
      }
      60% {
            -webkit-clip-path: inset(23% 0 71% 0);
            clip-path: inset(23% 0 71% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(74% 0 8% 0);
            clip-path: inset(74% 0 8% 0);
      }
      75% {
            -webkit-clip-path: inset(72% 0 23% 0);
            clip-path: inset(72% 0 23% 0);
      }
      80% {
            -webkit-clip-path: inset(71% 0 9% 0);
            clip-path: inset(71% 0 9% 0);
      }
      85% {
            -webkit-clip-path: inset(52% 0 3% 0);
            clip-path: inset(52% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(42% 0 46% 0);
            clip-path: inset(42% 0 46% 0);
      }
      95% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      100% {
            -webkit-clip-path: inset(55% 0 4% 0);
            clip-path: inset(55% 0 4% 0);
      }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="author" content="Joshua">
      
      <title>XXX's Website | XXX</title>
      
      <!-- stylesheet -->
      <link rel="stylesheet" href="style.css">
      
      <!-- bootstrap cdns -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
      
      <!-- hack fonts -->
      <link href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css' rel='stylesheet'>
</head>
<body>
      <div class="d-flex flex-column min-vh-100 min-vw-100">
            <!-- owner -->
            <div class="container-fluid owner">
                  <p class="text-left">I'm XXX XXX</p>
            </div>
            <!-- nav bar -->

            <!-- main phrase -->
            <div class="container-fluid">
                  <p class="text-center h1 glitch" data-text="Technology is my Passion">Technology is my Passion</p>
            </div>
      </div>
</body>
</html>

​

html
css
responsive-design
bootstrap-5
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-10 10:07:45

您只需要应用类my-auto，它将y轴上的边距设置为auto，从而在可用空间内垂直对齐。

​

代码语言：javascript
复制
/*--- basic styling ---*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Hack, monospace !important;
    background-color: #0f0f0f !important;
}

.owner {
        color: #F4364C;
        font-size: 1.2vw;
}

/*--- glitch effect ---*/
.glitch {
      color: #F4364C;
      position: relative;
      font-size: 4vw !important;
}

.glitch::before {
      color: #F4364C;
      position: absolute;
      content: attr(data-text);
      top: 0vh;
      left: 0.3vw;
      width: 100%;
      height: 100%;
      text-shadow: -1px 0 #FFD700;
      background: #0f0f0f;
      overflow: hidden;
      animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
    
.glitch::after {
      color: #F4364C;
      position: absolute;
      content: attr(data-text);
      top: 0vh;
      right: 0.3vw;
      width: 100%;
      height: 100%;
      text-shadow: -1px 0 #C0C0C0;
      background: #0f0f0f;
      overflow: hidden;
      animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
    
@-webkit-keyframes glitch-anim-1 {
      0% {
            -webkit-clip-path: inset(37% 0 1% 0);
            clip-path: inset(37% 0 1% 0);
      }
      5% {
            -webkit-clip-path: inset(46% 0 40% 0);
            clip-path: inset(46% 0 40% 0);
      }
      10% {
            -webkit-clip-path: inset(99% 0 1% 0);
            clip-path: inset(99% 0 1% 0);
      }
      15% {
            -webkit-clip-path: inset(91% 0 6% 0);
            clip-path: inset(91% 0 6% 0);
      }
      20% {
            -webkit-clip-path: inset(11% 0 37% 0);
            clip-path: inset(11% 0 37% 0);
      }
      25% {
            -webkit-clip-path: inset(97% 0 1% 0);
            clip-path: inset(97% 0 1% 0);
      }
      30% {
            -webkit-clip-path: inset(24% 0 56% 0);
            clip-path: inset(24% 0 56% 0);
      }
      35% {
            -webkit-clip-path: inset(20% 0 30% 0);
            clip-path: inset(20% 0 30% 0);
      }
      40% {
            -webkit-clip-path: inset(89% 0 8% 0);
            clip-path: inset(89% 0 8% 0);
      }
      45% {
            -webkit-clip-path: inset(36% 0 60% 0);
            clip-path: inset(36% 0 60% 0);
      }
      50% {
            -webkit-clip-path: inset(5% 0 62% 0);
            clip-path: inset(5% 0 62% 0);
      }
      55% {
            -webkit-clip-path: inset(9% 0 3% 0);
            clip-path: inset(9% 0 3% 0);
      }
      60% {
            -webkit-clip-path: inset(50% 0 21% 0);
            clip-path: inset(50% 0 21% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(68% 0 15% 0);
            clip-path: inset(68% 0 15% 0);
      }
      75% {
            -webkit-clip-path: inset(47% 0 49% 0);
            clip-path: inset(47% 0 49% 0);
      }
      80% {
            -webkit-clip-path: inset(90% 0 3% 0);
            clip-path: inset(90% 0 3% 0);
      }
      85% {
            -webkit-clip-path: inset(97% 0 3% 0);
            clip-path: inset(97% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(45% 0 29% 0);
            clip-path: inset(45% 0 29% 0);
      }
      95% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      100% {
            -webkit-clip-path: inset(46% 0 12% 0);
            clip-path: inset(46% 0 12% 0);
      }
}
    
@keyframes glitch-anim-1 {
      0% {
            -webkit-clip-path: inset(37% 0 1% 0);
            clip-path: inset(37% 0 1% 0);
      }
      5% {
            -webkit-clip-path: inset(46% 0 40% 0);
            clip-path: inset(46% 0 40% 0);
      }
      10% {
            -webkit-clip-path: inset(99% 0 1% 0);
            clip-path: inset(99% 0 1% 0);
      }
      15% {
            -webkit-clip-path: inset(91% 0 6% 0);
            clip-path: inset(91% 0 6% 0);
      }
      20% {
            -webkit-clip-path: inset(11% 0 37% 0);
            clip-path: inset(11% 0 37% 0);
      }
      25% {
            -webkit-clip-path: inset(97% 0 1% 0);
            clip-path: inset(97% 0 1% 0);
      }
      30% {
            -webkit-clip-path: inset(24% 0 56% 0);
            clip-path: inset(24% 0 56% 0);
      }
      35% {
            -webkit-clip-path: inset(20% 0 30% 0);
            clip-path: inset(20% 0 30% 0);
      }
      40% {
            -webkit-clip-path: inset(89% 0 8% 0);
            clip-path: inset(89% 0 8% 0);
      }
      45% {
            -webkit-clip-path: inset(36% 0 60% 0);
            clip-path: inset(36% 0 60% 0);
      }
      50% {
            -webkit-clip-path: inset(5% 0 62% 0);
            clip-path: inset(5% 0 62% 0);
      }
      55% {
            -webkit-clip-path: inset(9% 0 3% 0);
            clip-path: inset(9% 0 3% 0);
      }
      60% {
            -webkit-clip-path: inset(50% 0 21% 0);
            clip-path: inset(50% 0 21% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(68% 0 15% 0);
            clip-path: inset(68% 0 15% 0);
      }
      75% {
            -webkit-clip-path: inset(47% 0 49% 0);
            clip-path: inset(47% 0 49% 0);
      }
      80% {
            -webkit-clip-path: inset(90% 0 3% 0);
            clip-path: inset(90% 0 3% 0);
      }
      85% {
            -webkit-clip-path: inset(97% 0 3% 0);
            clip-path: inset(97% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(45% 0 29% 0);
            clip-path: inset(45% 0 29% 0);
      }
      95% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      100% {
            -webkit-clip-path: inset(46% 0 12% 0);
            clip-path: inset(46% 0 12% 0);
      }
}
    
@-webkit-keyframes glitch-anim-2 {
      0% {
            -webkit-clip-path: inset(35% 0 4% 0);
            clip-path: inset(35% 0 4% 0);
      }
      5% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      10% {
            -webkit-clip-path: inset(37% 0 13% 0);
            clip-path: inset(37% 0 13% 0);
      }
      15% {
            -webkit-clip-path: inset(86% 0 2% 0);
            clip-path: inset(86% 0 2% 0);
      }
      20% {
            -webkit-clip-path: inset(37% 0 22% 0);
            clip-path: inset(37% 0 22% 0);
      }
      25% {
            -webkit-clip-path: inset(36% 0 4% 0);
            clip-path: inset(36% 0 4% 0);
      }
      30% {
            -webkit-clip-path: inset(85% 0 10% 0);
            clip-path: inset(85% 0 10% 0);
      }
      35% {
            -webkit-clip-path: inset(40% 0 13% 0);
            clip-path: inset(40% 0 13% 0);
      }
      40% {
            -webkit-clip-path: inset(6% 0 69% 0);
            clip-path: inset(6% 0 69% 0);
      }
      45% {
            -webkit-clip-path: inset(6% 0 11% 0);
            clip-path: inset(6% 0 11% 0);
      }
      50% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      55% {
            -webkit-clip-path: inset(70% 0 9% 0);
            clip-path: inset(70% 0 9% 0);
      }
      60% {
            -webkit-clip-path: inset(23% 0 71% 0);
            clip-path: inset(23% 0 71% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(74% 0 8% 0);
            clip-path: inset(74% 0 8% 0);
      }
      75% {
            -webkit-clip-path: inset(72% 0 23% 0);
            clip-path: inset(72% 0 23% 0);
      }
      80% {
            -webkit-clip-path: inset(71% 0 9% 0);
            clip-path: inset(71% 0 9% 0);
      }
      85% {
            -webkit-clip-path: inset(52% 0 3% 0);
            clip-path: inset(52% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(42% 0 46% 0);
            clip-path: inset(42% 0 46% 0);
      }
      95% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      100% {
            -webkit-clip-path: inset(55% 0 4% 0);
            clip-path: inset(55% 0 4% 0);
      }
}
    
@keyframes glitch-anim-2 {
      0% {
            -webkit-clip-path: inset(35% 0 4% 0);
            clip-path: inset(35% 0 4% 0);
      }
      5% {
            -webkit-clip-path: inset(84% 0 10% 0);
            clip-path: inset(84% 0 10% 0);
      }
      10% {
            -webkit-clip-path: inset(37% 0 13% 0);
            clip-path: inset(37% 0 13% 0);
      }
      15% {
            -webkit-clip-path: inset(86% 0 2% 0);
            clip-path: inset(86% 0 2% 0);
      }
      20% {
            -webkit-clip-path: inset(37% 0 22% 0);
            clip-path: inset(37% 0 22% 0);
      }
      25% {
            -webkit-clip-path: inset(36% 0 4% 0);
            clip-path: inset(36% 0 4% 0);
      }
      30% {
            -webkit-clip-path: inset(85% 0 10% 0);
            clip-path: inset(85% 0 10% 0);
      }
      35% {
            -webkit-clip-path: inset(40% 0 13% 0);
            clip-path: inset(40% 0 13% 0);
      }
      40% {
            -webkit-clip-path: inset(6% 0 69% 0);
            clip-path: inset(6% 0 69% 0);
      }
      45% {
            -webkit-clip-path: inset(6% 0 11% 0);
            clip-path: inset(6% 0 11% 0);
      }
      50% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      55% {
            -webkit-clip-path: inset(70% 0 9% 0);
            clip-path: inset(70% 0 9% 0);
      }
      60% {
            -webkit-clip-path: inset(23% 0 71% 0);
            clip-path: inset(23% 0 71% 0);
      }
      65% {
            -webkit-clip-path: inset(93% 0 4% 0);
            clip-path: inset(93% 0 4% 0);
      }
      70% {
            -webkit-clip-path: inset(74% 0 8% 0);
            clip-path: inset(74% 0 8% 0);
      }
      75% {
            -webkit-clip-path: inset(72% 0 23% 0);
            clip-path: inset(72% 0 23% 0);
      }
      80% {
            -webkit-clip-path: inset(71% 0 9% 0);
            clip-path: inset(71% 0 9% 0);
      }
      85% {
            -webkit-clip-path: inset(52% 0 3% 0);
            clip-path: inset(52% 0 3% 0);
      }
      90% {
            -webkit-clip-path: inset(42% 0 46% 0);
            clip-path: inset(42% 0 46% 0);
      }
      95% {
            -webkit-clip-path: inset(93% 0 8% 0);
            clip-path: inset(93% 0 8% 0);
      }
      100% {
            -webkit-clip-path: inset(55% 0 4% 0);
            clip-path: inset(55% 0 4% 0);
      }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="author" content="Joshua">
      
      <title>XXX's Website | XXX</title>
      
      <!-- stylesheet -->
      <link rel="stylesheet" href="style.css">
      
      <!-- bootstrap cdns -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
      
      <!-- hack fonts -->
      <link href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css' rel='stylesheet'>
</head>
<body>
      <div class="d-flex flex-column min-vh-100 min-vw-100">
            <!-- owner -->
            <div class="container-fluid owner">
                  <p class="text-left">I'm XXX XXX</p>
            </div>
            <!-- nav bar -->

            <!-- main phrase -->
            <div class="container-fluid my-auto">
                  <p class="text-center h1 glitch" data-text="Technology is my Passion">Technology is my Passion</p>
            </div>
      </div>
</body>
</html>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69514120

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档