我试图在网页的四个边放置 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>P.S: 文本间距不是响应式的，这是另一个问题。
最佳答案
我确实在睡了一觉后修复了该代码，但那天没有时间发布它。这是我修复它的方法:
.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>关于css - 如何使用响应式字母间距悬停动画将文本定位在 HTML 页面的四个侧面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47874094/