[HTML & CSS] 흐르는 텍스트 만들기

 We don’t work for you. We don’t work for you. We don’t work for you. We don’t work for you. We don’t work for you. We don’t work for you.

 

 

처음에는 marquee로 만드려고 했는데 처음부터 화면에 꽉차게 떠 있어야 해서 style을 곁들인 html로 돌아와야 했다.

 

 

<style>
/* 움직이는 텍스트 */
.animated-title {font-size:60px; font-family:'Raleway',Sans-serif; font-weight:300; position: relative; width: 100%;max-width:100%; height: auto; padding:100px 0; overflow-x: hidden; overflow-y: hidden; }
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
    }
</style>


<div class="animated-title">
  <div class="track">
    <div class="content">&nbsp;We don’t work for you.&nbsp;We don’t work for you.&nbsp;We don’t work for you.&nbsp;We don’t work for you.&nbsp;We don’t work for you.&nbsp;We don’t work for you.</div>
  </div>
</div>

 

출처: https://dbreblog.com/53 [기획하는 디자이너:티스토리]