입문

CSS는 웹 페이지를 만들 때 없어서는 안 될 것입니다.많은 사람들이 HTML과 함께 CSS를 배웠다고 생각합니다.
문자의 색깔과 크기를 바꾸는 등 간단한 사용법은 프로그래밍 초보자도 쉽게 파악할 수 있지만 약간의 복잡한 장식(애니메이션 등)을 설치하면 상당히 어려울 것 같다(적어도 나).
다행히도 최근에 조금만 조사해 보니 인터넷에 복제할 수 있는 코드가 곳곳에 있어 설치 자체가 어렵지 않았다.나도 취미로 홈페이지를 만들 때 자주 사용하라고 한다.
그러나 복사는 코드의 내용을 이해할 수 없기 때문에 잘 적용되지 않는다.원래 복사해서 내용을 확인하지 않으면 끝나는 등 일부에게 욕을 먹습니다.
따라서 이번에는 실제 복제에 사용되는 코드를 참고하여 동작을 고려할 것이다.

본문

이번에 참고한 사이트는 CSS에만 설치된 버튼 디자인 및 스톱 효과 20+α 입니다.
간단하고 사용이 편리한 샘플 코드가 많이 기재되어 있다.
이번에는 이 사이트의 10번 샘플이 어떤 동작인지 확인한다.
마우스를 버튼 위에 놓으면 왼쪽 상단 배경에서 단번에 내려오는 코드입니다.

<a class="ss" href="#">Button</a>

.button {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;

    position: relative;
    z-index: 2;
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
    line-height: 50px;
    overflow: hidden;
  }
  .button::before,
  .button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
  }
  .button,
  .button::before,
  .button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .button::after {
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }
  .button:hover::after {
    top: 0;
    left: 0;
    background-color: #333;
  }
  .button:hover {
    color: #fff;
  }

코드는 사이트에서 직접 인용한 것이다.

before와 after

before와 after는 위조 요소라고 하는데 HTML 측면에서 코드를 쓰지 않고 조건부로 요소를 만들 수 있습니다.
나는 간단한 예를 하나 들겠다.ss류에서 위조 요소인before와after를 설명합니다. 아래와 같이 콘텐츠와background-color를 설정할 때 다음 그림으로 표시됩니다.

  .ss::before{
    content: '前';
    background-color: #00BCD4;
  }

  .ss::after{
    content: '後';
    background-color: #f3ffe5;
  }

여기서 주의해야 할 것은 before와 after의 위조 요소가 Button 전후에 놓여 있다는 것이다.이번에는 지정한 위치가 없기 때문에 기본 위치의 앞뒤에 표시됩니다.

위치 정보

포지션에 대한 설명이 길어지기 때문에 이번에는 사랑을 끊었다.
모르는 사람은 아래의 사이트를 참조하세요.
CSS 포지션: absolute 및 relative
원래의 css 코드에서 위치에 대한 정보만 발췌하면 다음과 같은 코드가 됩니다.

.button {
    position: relative;
  }

  .button::after {
    position: absolute;
    display: block;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }

button류는 부류이기 때문에 위조원소after는 button류의 왼쪽 상단 위치를 기준점(top:0, left:0)으로 한다.
따라서 top와 left가 마이너스로 설정되면 부모 요소의 왼쪽 상단에 있습니다.

전환 정보

transition 속성은 애니메이션을 실현할 수 있도록 합니다.transition 속성은 다음 네 개의 값을 매개 변수로 수행합니다.

transition-property(응용 변화의 속성. 규정값은all)

transition-duration(변화에 필요한 시간 설정)

transition-timing-function(변화의 정도를 설정한다. 규정치는 ease)

transition-delay(변화가 시작되기 전 시간 설정)

다음 기사에서 상세한 설명을 하였으니 마음에 드는 사람은 꼭 하세요.
[CSS3] Transition(변화)에 대한 요약

  .button,
  .button::before,
  .button::after {
    transition: all .3s;
  }
  .button::after {
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
  }
  .button:hover::after {
    top: 0;
    left: 0;
    background-color: #333;
  }
  .button:hover {
    color: #fff;
  }

즉, 이 코드

초기 상태는after원소가 왼쪽 상단에'width:100%;height:100%'이다.의 상태가 존재하지만 화면에 표시되지 않습니다.

마우스를 위에 놓으면after의 위치는'top:-100%;left:-100%'입니다.상태 (button의 왼쪽 위 화면 밖) 에서 "top:0;left:0;"을 선택하십시오.의 상태 (즉 buuton의 왼쪽 위 위치), 배경의 색도 설정합니다.이로써 버튼류의 화면 배경은 모두 검은색으로 덮어씌워졌다.(참고로 버튼류의 문자 색깔도 변했다)

transition을 설정했기 때문에 변화는 0.3초로 진행되기 때문에 배경이 왼쪽 위쪽에서 애니메이션으로 진행된다.

이렇게 하면 애니메이션이 어떻게 작동하는지 알 수 있다!
만약 네가 이 코드가 어떻게 작동하는지 이해한다면, 너도 약간의 변화를 할 수 있다.
왼쪽 상단 모서리 이외의 애니메이션을 만들려면 아래 초기 위치를 설정하십시오.

「top: 100%; left: -100%;」왼쪽 아래에서 애니메이션을 시작합니다.

「top: -100%; left: 100%;」에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

「top: 0; left: -100%;」에 설명된 해당 매개변수의 값입니다.

같은 동작을 생각해 봐요.

예시에 나열된 코드는 위치를 바꾸어 애니메이션을 실행합니다.
그렇다면 위치가 고정되어 크기만 바꿔도 순조롭게 진행될 수 있을 것 같습니다.

    .button::after {
    /* top: -100%;
    left: -100%;
    width: 100%;
    height: 100%; */
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #333;
  }
  .button:hover::after {
    /* top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    background-color: #333;
  }

이 코드도 순조롭게 진행되었다!

메모

css에 모르는 항목이 있기 때문에 이번 애니메이션과 직접적인 관계가 없지만 비망록으로 기재되어 있습니다.
z-index
겹칠 때의 우선도.
값이 클수록 표시됩니다.
overflow: hidden
내용이 상자에 수납되지 않은 상태에서 수납되지 않은 부분은 숨겨진다.내용이 수납되지 않은 경우에도 스크롤 바 등이 표시되지 않습니다

끝내다

실제가 어떻게 작동하는지 이해하는 느낌이 좋다.
CSS에 관해서는 복제품으로 직접 가져오는 경우가 많기 때문에 시간이 날 때 어떻게 움직이는지 확인하고 싶어요.
※ CODEPEN 사용은 이해하기 쉽기 때문에 조만간 수정하고 싶은데...