svg 폰트 그라데이션

by Kim Ara

HTML

<div class="cols-container set-1 motion onTrans" motion-pos="0.5">
  <div class="svg-box">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 158" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <mask id="mask" x="0" y="0" width="470" height="158">
          <rect x="-10" y="-10" width="500" height="170"></rect>
          <text class="txt-1" x="235" y="60" text-anchor="start">클래식에 더해진</text>
          <text class="txt-2" x="235" y="145" text-anchor="start">새로운 물결</text>
        </mask>
      </defs>
      <rect x="-10" y="-10" width="490" height="178"></rect>
    </svg>
    <div class="white-box">
      <div class="box box-1"></div>
      <div class="box box-2"></div>
    </div>
  </div>
  <div class="cols-4 ml-3-col step-2 fade-in">
    <p class="txt-paragraph-small space-mt-30">
      갤럭시의 블랙과 블루는 이제 모두를 위한 클래식이 되었다. 10년을 맞은 갤럭시가 찬란한 클래식과 더불어 새로운 색을 선보인다.
    </p>
  </div>
</div>

CSS

* {
    word-break: keep-all;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
}
.sec-2 .title .cols-container.onTrans .svg-box {
  animation: Gradient 4s 1s linear infinite;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (min-width: 1281px)
.sec-2 .title .cols-container .svg-box {
    height: 158px;
}
@media only screen and (min-width: 1281px)
.sec-2 .title .cols-container .svg-box {
    width: 470px;
}
.sec-2 .title .cols-container .svg-box {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
    transform: translateY(30%);
    position: relative;
    background: linear-gradient(0deg, #f19c90, #53ad85);
    background-size: 400% 400%;
    margin: 0px auto;
    margin: 0% auto;
}
.sec-2 .title .cols-container .svg-box svg defs mask rect {
    fill: white;
}
.sec-2 .title .cols-container.onTrans .svg-box svg defs mask text.txt-1 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215,...