다운로드 버튼: 인터랙션 애니메이션 효과

데모:






텍스트를 읽고 싶지 않다면 다음을 참조하십시오. https://youtu.be/GqeuTyft0kE

설명:
이것은 다운로드 버튼을 위한 멋진 효과와 애니메이션입니다. 유용하고 빈 줄 없이 세어 봅시다. 60줄이 있습니다. 마음에 드셨으면 좋겠습니다 ❤️✌🏻.

사용된 기술:


  • HTML
  • CSS
  • 자바스크립트

  • 자, 가자.
  • 초기 단계에서 HTML 코드를 작성합니다.

  •     <div class="container">
            <button class="button">
                <div class="progress"></div>
                <span class="value">Download</span>
            </button>
        </div>
    
    <progress> 은 선형 그라데이션 배경이 있는 요소입니다.
  • 자, CSS 코드를 작성해 보겠습니다. (파트 1)

  • .container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #23232f;
    }
    
    .button {
        all: unset;
        height: 50px;
        width: 120px;
        text-align: center;
        background-color: dodgerblue;
        color: #fff;
        border-radius: 5px;
        outline: 2px solid royalblue;
        outline-offset: 5px;
        transition: 0.4s;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .button:active {
        transform: scale(0.9);
    }
    

    이제 파트 2:

    .progress {
        position: absolute;
        inset: -20px 0 0 0;
        background-image: linear-gradient(to top, royalblue, deeppink);
        clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
    }
    .value {
        position: relative;
    }
    
    
    .button.start-download {
        width: 50px;
        border-radius: 50%;
    }
    

    .start-download 버튼 요소를 클릭하면 추가됩니다.
  • 이제 JavaScript를 사용할 시간입니다.

  • const $ = document;
    const query = queryItem => $.querySelector (queryItem);
    
    // ------- data
    const button = query ('.button');
    const progress = query ('.progress');
    const value = query ('.value');
    let percent = 0;
    
    // ------- function's
    const startDownload = () => {
        const intervalItem = setInterval (() => {
            button.removeEventListener ('click', startDownload);
            percent++;
    
            button.classList.add ('start-download');
            progress.style.inset = `${percent}% 0 0 0`;
            value.innerHTML = `${percent}%`;
    
            if (percent === 100) {
                clearInterval(intervalItem);
                percent = 0;
                button.classList.remove('start-download');
                progress.style.inset = '-20px 0 0 0';
                value.innerHTML = 'Download';
                button.addEventListener('click', startDownload);
            }
        }, 30);
    }
    
    // ------ event's
    button.addEventListener('click', startDownload);
    


    완료! 그게 다야, 나는 당신의 의견을 알고 싶습니다 🙋🏻❤️🔥.

    .

    .

    더 많은 튜토리얼:


  • Responsive Profile Page Using HTML and CSS

  • .

    나를 따르라:




  • GitHub


  • 좋은 웹페이지 즐겨찾기