Как разместить текст на четырех сторонах HTML-страницы с помощью адаптивной анимации при наведении курсора

Я пытаюсь разместить 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: межстрочный интервал не отвечает, что является еще одной проблемой.

Источник

1 ответ

Решение

Я исправил этот код после крепкого сна, но у меня не было времени опубликовать его в тот день. Вот как я это исправил:

.spaced-text{
        color: white ;
        letter-spacing: 2vw;
        width: 80%;
        height: 43px;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 2px 2px 4px #000000;
        z-index: 9999;
    }    

   .vertical-text-right:hover, .spaced-text:hover, .vertical-text-left:hover{
        text-decoration: none;
        color: #CE640E;
        animation: spaced-in   0.5s  ease-out forwards;
    }

    @keyframes spaced-in{
        0%{
            letter-spacing: 2vw;
            opacity: 0.1;
        }
        20%{
            letter-spacing: 1.5vw;
            opacity: 0.2;
        }
        40%{
            letter-spacing: 1vw;
            opacity: 0.4;
        }

        60%{
            letter-spacing: .8vw;
            opacity: 0.6;
        }

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

    .vertical-text-right{
        font-size: 2em;
        text-decoration: none;
        transform: rotate(-90deg);
        position: absolute;
        left: 50%;
        top: 30%;
        padding-right: 10%;
        padding-top: 10%;
        padding-bottom: 20%;
        text-align: center;
        z-index:999;
    }

    .vertical-text-left{
        font-size: 2em;
        position: absolute;
        right:50%;
        top:30%;
        transform: rotate(90deg);
        text-align: center;
        padding-left: 10%;
        padding-top: 10%;
        padding-bottom:20%;
        z-index: 999;
    }

    a{
        text-decoration: none;
        width: 500px;
    }

.text-center {text-align: center;}
<div>
<h1 class='text-center'><a class="spaced-text text-center" href="#">TOP TEXT</a></h1>
</div>
<div class='text-center' style="padding:25%;"> Some other contents</div>
<a class="spaced-text vertical-text-left" href="#">LEFT TEXT</a>

<a class="spaced-text vertical-text-right" href="#">RIGHT TEXT</a>
<div class='text-center'>
<h1><a class="spaced-text text-center" href="#">BOTTOM TEXT</a></h1>
</div>

Источник
Другие вопросы по тегам