Want to make my whole name float with disconnected letters-CodePudding

Im trying to make my whole name float in the box, my name is Josef. Im very new to HTML, so I have no idea what method should be used. can someone help me make the whole name bounce. but not like a whole word :D thank you

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Om mig :)</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <center>
    <marquee behavior="alternate" width="250">
      <h1>J O S E F </h1>
    </marquee>
  </center>

  <div >
    <p> Jeg er 18 år gammel </span>
      <br> Og elsker: </span>
      </br>
      <div>
        <span id="example">
        <ul>
          <li>at spille fodbold</li>
          <li>at lave mad</li>
          <li>at spise mad</li>
          <li>min familie</li>
          <li>mine venner</li>
        </ul>
      </span>
    </p>
    </div>

</body>

<div class=boghyg>
  <marquee direction="down" width="150" height="170" behavior="alternate" style="border:solid">
    <marquee behavior="alternate">
      J
    </marquee>

  </marquee>

</html>

CodePudding user response：

I would use letter-spacing: 5px instead of the spaces.

CodePudding user response：

Well You can just separate each words with span and use animation as following. learn CSS it will be easier.

*{
  margin:0;
  padding:0;
}

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.word span{
  position:relative;
  font-size:5rem; 
  animation:bounce 1.5s linear infinite;
  animation-delay: calc(.2s * var(--i));
}


@keyframes bounce{
  0%,100%{
    top:0px;
  }
  50%{
    top:25px;
  }
}

<body>
  <center >
    <span style="--i:1">J</span>
    <span style="--i:2">O</span>
    <span style="--i:3">S</span>
    <span style="--i:4">E</span>
    <span style="--i:5">F</span>
  </center>