css 如何保持标题的大小固定，并通过翻转使标题具有动画效果？

zpjtge22 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(138)

我是一个初学者，我想复制这个网站作为一个个人项目：https://olhauzhykova.com/
我希望标题部分保持相同的大小，而标题的变化。也有人可以建议我如何可以动画一个自上而下翻转每次标题的变化？
HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="webcss.css">
    <script src="webjs.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo"><img src="C:\Users\engar\Desktop\Website 2\logo.png"></div>
        <h1 class="title">Data Analyst</h1>
        <h1 class="title hidden">Mentor</h1>
        <h1 class="title hidden">Musician</h1>
        <h1 class="title hidden">Tech Enthusiast</h1>
    </div>
</body>
</html>

CSS：

.header {
    background-color: #f1f1f1;
    padding: 10px 40px; /* Change the padding value to adjust the width */
    border-radius: 20px; /* Round all corners */
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
  }
  
  .logo {
    display: inline-block;
    margin-right: 10px;
    border: 2px solid #333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    transition: all 0.3s ease-in-out;
  }

  img {
    max-width: 100%;
    max-height: 150%;
}
  
  .title {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }
  
  .title.hidden {
    display: none; /* hide hidden titles */
  }
  
  .header:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  
  .header:hover .logo {
    transform: rotate(360deg);
  }
  
  .header:hover .title {
    margin-left: 10px;
  }
  
  .title.hidden {
    display: none;
  }

简体中文

.header {
    background-color: #f1f1f1;
    padding: 10px 40px; /* Change the padding value to adjust the width */
    border-radius: 20px; /* Round all corners */
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
  }
  
  .logo {
    display: inline-block;
    margin-right: 10px;
    border: 2px solid #333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    transition: all 0.3s ease-in-out;
  }

  img {
    max-width: 100%;
    max-height: 150%;
}
  
  .title {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }
  
  .title.hidden {
    display: none; /* hide hidden titles */
  }
  
  .header:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  
  .header:hover .logo {
    transform: rotate(360deg);
  }
  
  .header:hover .title {
    margin-left: 10px;
  }
  
  .title.hidden {
    display: none;
  }

如果你也能推荐教程就太好了！

css

来源：https://stackoverflow.com/questions/76130820/how-do-i-keep-the-size-of-the-header-fixed-and-animate-the-title-with-a-flip

2条答案

按热度按时间

ukdjmx9f1#

这里有一个很好的CSS相关主题的源代码，这篇文章与transitions相关，是一个很好的参考网站。

赞(0）回复(0）举报 2023-05-02

j2cgzkjk2#

欢迎来到Stack Overflow。这听起来像是一个雄心勃勃的项目。
头的宽度改变的原因是因为你使用display: none作为隐藏类。这会将其从布局中取出，因此容器会调整大小。（https://developer.mozilla.org/en-US/docs/Web/CSS/display）
相反，您可能需要的是visibility: hidden或opacity: 0，这会将元素保留在布局中。（https://developer.mozilla.org/en-US/docs/Web/CSS/visibility）
由于您将使用过渡来创建Olya网站的效果，因此我建议使用opacity，以便您可以过渡淡入/淡出。
至于要做标题效果的动画，请查看变换和关键帧。我建议你熟悉浏览器的开发工具，这样你就可以自己调查了（Ctrl+Shift+我应该拉起检查器）。这是从Olya的源代码中提取的（尽管，这不太可能手工完成，可能使用了某种类型的库，如Framer Motion）：

@keyframes logo-title1 {
 0% {
  -webkit-transform:translateY(20px);
  transform:translateY(20px);
  opacity:0;
 }
 8.25% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1;
 }
 30% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1;
 }
 38% {
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
  opacity:0;
 }
 100% {
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
  opacity:0;
 }
}
.header .header__logo-animation .header__menu-item:nth-child(n+1) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:2.15s;
 animation-delay:2.15s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
.header .header__logo-animation .header__menu-item:nth-child(n+2) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:4.3s;
 animation-delay:4.3s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
.header .header__logo-animation .header__menu-item:nth-child(n+3) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:6.45s;
 animation-delay:6.45s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何保持标题的大小固定，并通过翻转使标题具有动画效果？

2条答案

相关问题

热门标签

最新问答