애니메이션3 [CSS] 마우스오버 (hover) 밑줄 애니메이션 효과 마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법 [html] Center Left to Right [css] ul { display: flex; gap: 40px; font-size: 40px; list-style: none; } li::after { content: ""; display: block; width: 100%; height: 4px; background: #000; transition: all 1s; } /* 가운데에서 나타남 */ .center::after { transform: scaleX(0); } .center:hover::after { transform: scaleX(1); } /* 왼쪽에서 나타남 */ .. 2023. 8. 22. [jQuery] 마우스 커서(cursor) 따라다니는 애니메이션(animation) 마우스 커서(cursor)를 따라다니는 도형 애니메이션(animation) [html] [css] .cursor { position: absolute; transform: translate(100%, 100%); width: 1rem; height: 1rem; border: 2px solid #808080; border-radius: 50%; opacity: 0.4; transition: all 0.3s ease-out; z-index: 1000; } .cursor.on { border: 2px solid #222; background: #222; opacity: 1; } [js] $(window).on('scroll mousemove', function(e){ $('.cursor').css('left'.. 2023. 8. 11. [CSS] 흐르는 텍스트 배너 애니메이션 (scrolling text animation) css에서 keyframes와 animation을 사용하여 흐르는 텍스트 배너 애니메이션 만들기 [html] SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT [css] @keyframes scroll-animation{ 0%{ left: 0; } 100%{ left: -400px; /* 텍스트 width와 동일 */ } } .scroll-text{ width: 100%; overflow: hidden; } .track{ display: flex; position: relative; width: 2800px; animation: scroll-animation 5s linear infinite; } .tra.. 2023. 6. 12. 이전 1 다음 728x90
