Question

我是网络开发的新手，最近我遇到了this网站，想要试一试。我使用flexbox来设计布局样式。问题是我无法弄清楚如何在网站上悬停文本动画，并且垂直文本也不完全在中心。而且让我知道flexbox甚至是做出这种布局的正确选择。谢谢你的帮助。

这是我的css代码：

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        #homeBox {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .navBarRow {
            height: 100px;
            background-color: white;
            vertical-align: middle;
            text-align: center;
        }

        .navBarCol {
            width: 100px;
            background-color: white;
            vertical-align: middle;
            text-align: center;
        }

        #abt, #contact, #newsBlog, #projects {
            font-family: "Comic Sans MS", monospace;
            font-size: 10px;
        }

        #abt:hover {
            font-size: 22px;
        }

        #projects:hover {
            font-size: 22px;
        }

        #newsBlog:hover {
            font-size: 22px;
        }

        #contact:hover {
            font-size: 20px;
        }

        .middleBox {
            flex: auto;
            display: flex;
        }

        #about {
            flex: auto;
            background-color: white;
        }
    </style>

Here my html code:

<body>
<div id="homeBox">
    <div class="navBarRow">
        <div id="newsBlog">
            <h2>NEWSBLOG</h2>
        </div>
    </div>
    <div class="middleBox">
        <div class="navBarCol">
            <div id="abt">
                <h2>A</h2>
                <h2>B</h2>
                <h2>O</h2>
                <h2>U</h2>
                <h2>T</h2>
            </div>
        </div>
        <div id="about"><h1 align="center">SOMETHING HERE</h1></div>
        <div class="navBarCol">
            <div id="contact">
                <h2>C</h2>
                <h2>O</h2>
                <h2>N</h2>
                <h2>T</h2>
                <h2>A</h2>
                <h2>C</h2>
                <h2>T</h2>
            </div>
        </div>
    </div>
    <div class="navBarRow">
        <div id="projects">
            <h2>PROJECTS</h2>
        </div>
    </div>
</div>
</body>

Answer 1

为了实现悬停效果，我为margin-top和letter-spacing

设置了动画

我删除/更改/添加了属性以使用Flexbox的功能（请参阅CSS中的注释）。

＆＃13;

html, body {
  margin: 0;
}
#homeBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.navBarRow {
  height: 100px;
  display: flex;                                              /*  added  */
  align-items: center;                                        /*  added  */
  justify-content: center;                                    /*  added  */
}
.navBarCol {
  width: 100px;
  display: flex;                                              /*  added  */
  align-items: center;                                        /*  added  */
  justify-content: center;                                    /*  added  */
}
#abt, #contact, #newsBlog, #projects {
  font-family: "Comic Sans MS", monospace;
  font-size: 10px;
}
#abt h2, #contact h2 {                                        /*  added rule  */
  margin: 5px 0 0 0;
  transition: margin-top .5s;
}
#abt:hover h2 + h2, #contact:hover h2 + h2 {                  /*  added rule  */
  margin-top: 15px;
}
#newsBlog h2, #projects h2 {                                  /*  added rule  */
  letter-spacing: 5px;
  transition: letter-spacing .5s;
}
#projects:hover h2, #newsBlog:hover h2 {                      /*  added rule  */
  letter-spacing: 15px;
}

.middleBox {
  flex-grow: 1;                                               /*  changed  */
  display: flex;
}
#about {
  flex-grow: 1;                                               /*  changed  */
}

＆＃13;

<div id="homeBox">
  <div class="navBarRow">
    <div id="newsBlog">
      <h2>NEWSBLOG</h2>
    </div>
  </div>
  <div class="middleBox">
    <div class="navBarCol">
      <div id="abt">
        <h2>A</h2>
        <h2>B</h2>
        <h2>O</h2>
        <h2>U</h2>
        <h2>T</h2>
      </div>
    </div>
    <div id="about">
      <h1 align="center">SOMETHING HERE</h1>
    </div>
    <div class="navBarCol">
      <div id="contact">
        <h2>C</h2>
        <h2>O</h2>
        <h2>N</h2>
        <h2>T</h2>
        <h2>A</h2>
        <h2>C</h2>
        <h2>T</h2>
      </div>
    </div>
  </div>
  <div class="navBarRow">
    <div id="projects">
      <h2>PROJECTS</h2>
    </div>
  </div>
</div>

＆＃13;

这是一个更新，文本在链接网站中旋转，仅动画letter-spacing

＆＃13;

html, body {
  margin: 0;
}
#homeBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.navBarRow {
  height: 100px;
  display: flex;                                              /*  added  */
  align-items: center;                                        /*  added  */
  justify-content: center;                                    /*  added  */
}
.navBarCol {
  width: 100px;
  display: flex;                                              /*  added  */
  align-items: center;                                        /*  added  */
  justify-content: center;                                    /*  added  */
}
#abt, #contact, #newsBlog, #projects {
  font-family: "Comic Sans MS", monospace;
  font-size: 10px;
}
#abt h2, #contact h2 {                                        /*  added rule  */
  writing-mode: vertical-rl;
}
#contact h2 {                                                 /*  added rule  */
  transform: rotate(180deg);
}
#abt h2, #contact h2,
#newsBlog h2, #projects h2 {
  letter-spacing: 5px;
  transition: letter-spacing .5s;
}
#abt:hover h2, #contact:hover h2,                             /*  added rule  */
#projects:hover h2, #newsBlog:hover h2 {
  letter-spacing: 20px;
}

.middleBox {
  flex-grow: 1;                                               /*  changed  */
  display: flex;
}
#about {
  flex-grow: 1;                                               /*  changed  */
}


/*  styles for this demo only, so hover looks good in small snippet window  */
@media (max-height: 300px) {
  body { overflow: hidden; }
  .navBarRow { height: 30px; }
  #abt:hover h2, #contact:hover h2, #projects:hover h2, #newsBlog:hover h2 {
    letter-spacing: 12px;
  }
}

＆＃13;

<div id="homeBox">
  <div class="navBarRow">
    <div id="newsBlog">
      <h2>NEWSBLOG</h2>
    </div>
  </div>
  <div class="middleBox">
    <div class="navBarCol">
      <div id="abt">
        <h2>ABOUT</h2>
      </div>
    </div>
    <div id="about">
      <h1 align="center">SOMETHING HERE</h1>
    </div>
    <div class="navBarCol">
      <div id="contact">
        <h2>CONTACT</h2>
      </div>
    </div>
  </div>
  <div class="navBarRow">
    <div id="projects">
      <h2>PROJECTS</h2>
    </div>
  </div>
</div>

＆＃13;

使用css为flexbox内的文本添加动画效果

1 个答案: