반응 형 문자 간격 호버 애니메이션을 사용하여 HTML 페이지의 네면에 텍스트를 배치하는 방법

웹 페이지의 네면에 4 개의 텍스트를 배치하려고합니다. 이 모든 텍스트는 모든 문자를 서로 구분하는 줄 간격을 갖습니다. 일단 괘선 간격이 정상으로 줄어들면 중간에 나타납니다.반응 형 문자 간격 호버 애니메이션을 사용하여 HTML 페이지의 네면에 텍스트를 배치하는 방법

-------------------------- 
|   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의 왼쪽과 오른쪽에 있어야합니다.

피씨 :텍스트 간격이 반응하지 않아 다른 문제입니다.

출처

2017-12-18 Wasi

오나 측 노트의'

가'요소가 더 이상 존재와 사용하지 않아야합니다. – j08691

나는 수면 후 코드를 수정했지만 그날은 게시 할 시간이 없었습니다. 여기에 내가 그것을 해결하는 방법입니다 :

.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>

출처

2017-12-24 20:50:15 Wasi

반응 형 문자 간격 호버 애니메이션을 사용하여 HTML 페이지의 네면에 텍스트를 배치하는 방법

답변

관련 문제