0

Web ページの 4 つの側面に 4 つのテキストを配置しようとしています。これらすべてのテキストには、すべての文字を互いに区切るための行間があります。一度、ホバーされた行間隔が通常に縮小され、中央に表示されます。

--------------------------
|         top text       |
|                        |
| v                     v|
| e                     e|
| r                     r|
| t    other  content   t|
| i                     i|   
| c                     c|
| a                     a|
| l                     l|
|       bottom text      |
--------------------------

これまでのところ、私はこれを書いています：

.spaced-text{
    color:white ;
    text-shadow: 2px 2px 4px #000000;
    letter-spacing: 100px;
    width: 100%;
  height: 42px;
  text-transform: uppercase;
  text-decoration: none;
    text-align: center;

}    

.spaced-text:hover{
    text-decoration: none;
    color: #CE640E;
    animation: spaced-in   1s  ease-out forwards;
}

@keyframes spaced-in{
    0%{
    letter-spacing: 100px;
    opacity: 0.1;
  }
  20%{
    letter-spacing: 80px;
    opacity: 0.2;
  }
    40%{
    letter-spacing: 60px;
    opacity: 0.4;
  }

    60%{
    letter-spacing: 40px;
    opacity: 0.6;
  }

    80%{
    letter-spacing: 20px;
    opacity: 0.8;
  }
  100%{
    letter-spacing: 1px;
    opacity: 1;
  }
}

.vertical-text-right{
    text-decoration: none;
    transform: rotate(-90deg);
    float: right;
    position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 50%;
    text-align: center;
    

}

.vertical-text-left{
    transform: rotate(90deg);
    float: left;
    position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    padding-right: 50%;
    text-align: center;
    

}
a{
   text-decoration: none;
}
<html>
<body>
<div style="float:left"><h1 class="vertical-text-right spaced-text"> <a href="#">Right Text</a></h1></div> 
<div style="float:left"><h1 class="vertical-text-left spaced-text"> <a href="#">Left Text</a></h1></div> 
<center><div class="text-center"><h1 class="spaced-text text-center"> <a href="#"> Top Text</a></h1></div> 
</center>
<div style="width:100%; height: 100px;">
<center><i>Some other content</i></center></div>
<center><div class="text-center"><h1 class="spaced-text text-center"> <a href="#">Bottom Text</a></h1></div> 
</center>


</body>
</html>
左右の縦書きテキストが正しく整列していないことに注意してください。div の左側と右側に配置する必要があります。

PS: テキストの間隔が反応しません。これは別の問題です。

4

1 に答える 1