[해피CGI][cgimall] Signature animation

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Signature animation

해피CGI윤실장 2024. 10. 28. 09:14

텍스트를 필기체로 디자인 해주는 효과입니다.
HTML, CSS, JS를 사용하였습니다.
자세한 내용은 데모사이트 주소에서 확인하실 수 있습니다.

HTML

</svg>

Sign

</button>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

<div class="signed-by">Signed by,</div>

</div>

CSS

body {

background: url('https://img.freepik.com/premium-photo/abstract-blurred-sky-colorful_40299-22.jpg') no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

.modal {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

display: flex;

flex-direction: column;

align-items: stretch;

gap: 36px;

width: 380px;

height: 52px;

padding: 24px;

border-radius: 40px;

overflow: hidden;

background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);

box-shadow: 0 0 16px 0 rgba(0,0,0,0);

transition: 0.4s ease height, 0.4s ease padding, 0.2s border-radius, 0.6s ease box-shadow;

}

.modal:hover {

box-shadow: 0 24px 48px -24px rgba(0,0,0,0.025);

}

.modal.active {

height: 160px;

padding: 32px;

border-radius: 48px;

}

.field-wrapper {

position: relative;

display: flex;

flex-direction: column;

align-items: stretch;

}

.field {

font-family: "Instrument Sans", sans-serif;

font-optical-sizing: auto;

font-style: normal;

/* font-variation-settings: "wdth" 100; */

font-size: 20px;

display: flex;

align-items: center;

min-height: 48px;

border-radius: 16px;

border: 1px solid rgba(0,0,0,0.05);

padding: 0 12px 2px 12px;

background: none;

color: #000;

outline: none;

transition: border 0.2s;

}

.active .field {

border: 1px solid rgba(0,0,0,0.5);

}

.field::placeholder {

opacity: 0.5;

color: #000;

}

.sign, .signed-by {

font-family: "JetBrains Mono", monospace;

font-optical-sizing: auto;

font-style: normal;

text-transform: uppercase;

font-size: 14px;

letter-spacing: 0.02em;

}

.active .signed-by {

opacity: 1;

}

.sign {

position: absolute;

right: 4px;

top: 50%;

transform: translateY(-50%);

display: flex;

gap: 8px;

align-items: center;

height: 44px;

border-radius: 12px;

padding: 0 14px 2px 12px;

background: #000;

color: #fff;

border: none;

opacity: 0.2;

transition: 0.2s;

}

.active .sign {

opacity: 1;

}

.signature {

border-bottom: 1px solid rgba(0,0,0,0.25)

}

.letter-bank {

display: none;

}

.signed-by {

color: rgba(0,0,0,0.5);

opacity: 0;

padding-bottom: 2px;

transition: 0.2s ease;

}

.signature-main {

display: flex;

min-height: 51px;

flex-flow: wrap;

justify-content: start;

}

.signature-main svg path {

stroke-linejoin: round;

stroke-linecap: round;

stroke-width: 1;

stroke: #000;

transition: 0.2s stroke-dashoffset;

}

.up, .lo {

max-height: 51px;

}

/* letter boxes */

.up.a {

margin: 0 -10px 0 -7px;

}

.up.b {

margin: 0 -5px 0 -13px;

}

.up.c {

margin: 0 -5px 0 -6px;

}

.up.d {

margin: 0 -6px 0 -6px;

}

.up.e {

margin: 0 -10px 0 -8px;

}

.up.f {

margin: 0 -13px 0 -5px;

}

.up.g {

margin: 0 0px 0 -6px;

}

.up.h {

margin: 0 -8px 0 -6px;

}

.up.i {

margin: 0 -25px 0 -16px;

}

.up.j {

margin: 0 -24px 0 -6px;

}

.up.k {

margin: 0 -23px 0 -3px;

}

.up.l {

margin: 0 -7px 0 -5px;

}

.up.m {

margin: 0 -7px 0 -10px;

}

.up.n {

margin: 0 -4px 0 -10px;

}

.up.o {

margin: 0 -1px 0 -1px;

}

.up.p {

margin: 0 -12px 0 -3px;

}

.up.q {

margin: 0 -3px 0 -3px;

}

.up.r {

margin: 0 -8px 0 -4px;

}

.up.s {

margin: 0 -14px 0 -2px;

}

.up.t {

margin: 0 -29px 0 -17px;

}

.up.u {

margin: 0 -10px 0 -1px;

}

.up.v {

margin: 0 -15px 0 -6px;

}

.up.w {

margin: 0 -8px 0 -6px;

}

.up.x {

margin: 0 -11px 0 -13px;

}

.up.y {

margin: 0 -12px 0 2px;

}

.up.z {

margin: 0 -9px 0 -8px;

}

.lo.a {

margin: 0 -4px 0 0;

}

.lo.b {

margin: 0 -6px 0 -1.5px;

}

.lo.c {

margin: 0 -4px 0 0;

}

.lo.d {

margin: 0 -11.3px 0 0;

}

.lo.e {

margin: 0 -4px 0 0;

}

.lo.f {

margin: 0 -6px 0 -6px;

}

.lo.g {

margin: 0 -4px 0 -10px;

}

.lo.h {

margin: 0 -4px 0 -1px;

}

.lo.i {

margin: 0 -3.5px 0 0;

}

.lo.j {

margin: 0 -5px 0 -14px;

}

.lo.k {

margin: 0 -6.5px 0 0;

}

.lo.l {

margin: 0 -12px 0 -4px;

}

.lo.m, .lo.n {

margin: 0 -5px 0 0;

}

.lo.o {

margin: 0 -2.5px 0 0;

}

.lo.p {

margin: 0 -2.5px 0 -10px;

}

.lo.q {

margin: 0 -2px 0 -6px;

}

.lo.r {

margin: 0 -3px 0 -1px;

}

.lo.s {

margin: 0 -4px 0 -4px;

}

.lo.t {

margin: 0 -12.5px 0 -3.5px;

}

.lo.u, .lo.v {

margin: 0 -4.5px 0 0;

}

.lo.w, .lo.x {

margin: 0 -4px 0 0;

}

.lo.y {

margin: 0 -4px 0 -9px;

}

.lo.z {

margin: 0 -4px 0 -10px;

}

/* letter paths */

.up.a path {

stroke-dasharray: 190;

stroke-dashoffset: 190;

}

.up.b path {

stroke-dasharray: 230;

stroke-dashoffset: 230;

}

.up.c path {

stroke-dasharray: 101;

stroke-dashoffset: 101;

}

.up.d path {

stroke-dasharray: 194;

stroke-dashoffset: 194;

}

.up.e path {

stroke-dasharray: 132;

stroke-dashoffset: 132;

}

.up.f path {

stroke-dasharray: 191;

stroke-dashoffset: 191;

}

.up.g path {

stroke-dasharray: 145;

stroke-dashoffset: 145;

}

.up.h path {

stroke-dasharray: 235;

stroke-dashoffset: 235;

}

.up.i path {

stroke-dasharray: 128;

stroke-dashoffset: 128;

}

.up.j path {

stroke-dasharray: 174;

stroke-dashoffset: 174;

}

.up.k path {

stroke-dasharray: 244;

stroke-dashoffset: 244;

}

.up.l path {

stroke-dasharray: 83;

stroke-dashoffset: 83;

}

.up.m path {

stroke-dasharray: 176;

stroke-dashoffset: 176;

}

.up.n path {

stroke-dasharray: 111;

stroke-dashoffset: 111;

}

.up.o path {

stroke-dasharray: 167;

stroke-dashoffset: 167;

}

.up.p path {

stroke-dasharray: 203;

stroke-dashoffset: 203;

}

.up.q path {

stroke-dasharray: 212;

stroke-dashoffset: 212;

}

.up.r path {

stroke-dasharray: 235;

stroke-dashoffset: 235;

}

.up.s path {

stroke-dasharray: 100;

stroke-dashoffset: 100;

}

.up.t path {

stroke-dasharray: 133;

stroke-dashoffset: 133;

}

.up.u path {

stroke-dasharray: 136;

stroke-dashoffset: 136;

}

.up.v path {

stroke-dasharray: 100;

stroke-dashoffset: 100;

}

.up.w path {

stroke-dasharray: 163;

stroke-dashoffset: 163;

}

.up.x path {

stroke-dasharray: 153;

stroke-dashoffset: 153;

}

.up.y path {

stroke-dasharray: 162;

stroke-dashoffset: 162;

}

.up.z path {

stroke-dasharray: 149;

stroke-dashoffset: 149;

}

.lo.a path {

stroke-dasharray: 36;

stroke-dashoffset: 36;

}

.lo.b path {

stroke-dasharray: 64;

stroke-dashoffset: 64;

}

.lo.c path {

stroke-dasharray: 17;

stroke-dashoffset: 17;

}

.lo.d path {

stroke-dasharray: 73;

stroke-dashoffset: 73;

}

.lo.e path {

stroke-dasharray: 22;

stroke-dashoffset: 22;

}

.lo.f path {

stroke-dasharray: 59;

stroke-dashoffset: 59;

}

.lo.g path {

stroke-dasharray: 75;

stroke-dashoffset: 75;

}

.lo.h path {

stroke-dasharray: 48;

stroke-dashoffset: 48;

}

.lo.i path {

stroke-dasharray: 16;

stroke-dashoffset: 16;

}

.lo.j path {

stroke-dasharray: 59;

stroke-dashoffset: 59;

}

.lo.k path {

stroke-dasharray: 54;

stroke-dashoffset: 54;

}

.lo.l path {

stroke-dasharray: 33;

stroke-dashoffset: 33;

}

.lo.m path {

stroke-dasharray: 43;

stroke-dashoffset: 43;

}

.lo.n path {

stroke-dasharray: 27;

stroke-dashoffset: 27;

}

.lo.o path {

stroke-dasharray: 17;

stroke-dashoffset: 17;

}

.lo.p path {

stroke-dasharray: 67;

stroke-dashoffset: 67;

}

.lo.q path {

stroke-dasharray: 63;

stroke-dashoffset: 63;

}

.lo.r path {

stroke-dasharray: 24;

stroke-dashoffset: 24;

}

.lo.s path {

stroke-dasharray: 32;

stroke-dashoffset: 32;

}

.lo.t path {

stroke-dasharray: 91;

stroke-dashoffset: 91;

}

.lo.u path {

stroke-dasharray: 28;

stroke-dashoffset: 28;

}

.lo.v path {

stroke-dasharray: 17;

stroke-dashoffset: 17;

}

.lo.w path {

stroke-dasharray: 21;

stroke-dashoffset: 21;

}

.lo.x path {

stroke-dasharray: 24;

stroke-dashoffset: 24;

}

.lo.y path {

stroke-dasharray: 70;

stroke-dashoffset: 70;

}

.lo.z path {

stroke-dasharray: 67;

stroke-dashoffset: 67;

}

저작자표시