다운로드 버튼: 인터랙션 애니메이션 효과
11719 단어 beginnersjavascriptcsstutorial
데모:
텍스트를 읽고 싶지 않다면 다음을 참조하십시오. https://youtu.be/GqeuTyft0kE
설명:
이것은 다운로드 버튼을 위한 멋진 효과와 애니메이션입니다. 유용하고 빈 줄 없이 세어 봅시다. 60줄이 있습니다. 마음에 드셨으면 좋겠습니다 ❤️✌🏻.
사용된 기술:
자, 가자.
<div class="container">
<button class="button">
<div class="progress"></div>
<span class="value">Download</span>
</button>
</div>
<progress>
은 선형 그라데이션 배경이 있는 요소입니다..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
버튼 요소를 클릭하면 추가됩니다.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);
완료! 그게 다야, 나는 당신의 의견을 알고 싶습니다 🙋🏻❤️🔥.
.
.
더 많은 튜토리얼:
.
나를 따르라:
Reference
이 문제에 관하여(다운로드 버튼: 인터랙션 애니메이션 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mohammadsahragard/download-button-animation-3085텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)