애니메이션 버튼을 만드는 방법

17619 단어 htmlcssbeginnersaurora
안녕하세요, 여러분 이 튜토리얼에서 우리는 언급된 쿼리를 해결하려고 노력할 것입니다. 또한 애니메이션 버튼을 만드는 방법을 배웁니다.

공통 쿼리


  • 애니메이션 버튼을 만드는 방법은 무엇입니까?
  • 어떻게 버튼을?
  • 오로라 UI 버튼을 만드는 방법은 무엇입니까?

    • 참조:- How to find a word in a paragraph

    애니메이션 버튼을 단계별로 만드는 방법



    먼저 index.html과 style.css라는 두 개의 파일을 만든 다음 이를 위한 코드를 작성해야 합니다.

    1 단계



    index.html 안에 아래 코드 추가

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Aurora UI Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="animated-button-outer">
      <div class="button">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
        <span class="four"></span>
        <span class="text">Button</span>
      </div>
    </div>
  </body>
</html>


    2 단계



    그런 다음 아래 화면에서 제공하는 코드인 style.css에 대한 코드를 추가해야 합니다.

    * {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    background-color: #f2f4f6;
}
.animated-button-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  width: 250px;
  height: 80px;
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgb(0 0 0 / 50%);
}
.button > span {
  position: absolute;
  filter: blur(50px);
  opacity: 0.8;
}
.button .one {
  width: 600px;
  height: 600px;
  left: -50px;
  top: -300px;
  background: #1b0035;
  z-index: 3;
  transform: rotate(0) translate(80px) rotate(0);
  animation: fly 12s linear infinite;
  -webkit-animation: fly 12s linear infinite;
}
.button .two {
  width: 500px;
  height: 800px;
  background: #3f0069;
  bottom: -30px;
  left: -50px;
}
.button .three {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  bottom: -80px;
  right: -100px;
  background: #ff00aa;
  animation: flyPlus 10s linear infinite;
  -webkit-animation: flyPlus 10s linear infinite;
}
.button .four {
  width: 350px;
  height: 350px;
  bottom: 0;
  right: 0;
  background: #90e0ff;
  margin: auto;
  animation: flyPlus 15s linear infinite;
  -webkit-animation: flyPlus 15s linear infinite;
}
.animated-button-outer .button .text {
  opacity: 1;
  filter: unset;
  left: 0;
  right: 0;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  z-index: 9;
  text-transform: uppercase;
}



@keyframes fly {
  100% {
    transform: rotate(2turn) translate(200px) rotate(-2turn);
    -webkit-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -moz-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -ms-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -o-transform: rotate(2turn) translate(200px) rotate(-2turn);
  }
}


@keyframes flyPlus {
  100% {
    transform: rotate(-2turn) translate(200px) rotate(2turn);
    -webkit-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -moz-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -ms-transform: rotate(-2turn) translate(200px) rotate(2turn);
    -o-transform: rotate(-2turn) translate(200px) rotate(2turn);
}
}


    애니메이션 버튼 비디오 출력을 만드는 방법:





    애니메이션 버튼 Codepen 출력을 만드는 방법:



    곧 업데이트 하겠습니다 :)
    properties 파일 설정 데이터
    [파이썬 / Algorithm] 프로그래머스 연습문제 level1 - 직사각형 별찍기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage