Border Animation Pure CSS & HTML – Gradient Border Color

안녕하세요 매일 수업료에 다시 오신 것을 환영합니다

이 튜토리얼에서는 순수 CSS 테두리 애니메이션을 작성하고 있습니다 그래서 우리는 두 개의 애니메이션을 만들 것입니다 당신은 귀하의 웹 사이트에 대한 모든 애니메이션을 선택할 수 있습니다 그러나이 비디오를 시작하기 전에 구독 버튼을 누르고 있는지 확인하십시오 내 모든 새로운 비디오를 알리기위한 벨 아이콘

그리고이 비디오에서 유용한 것을 찾으면 같은 버튼을 눌러야합니다 그래서 우리가 늦기 전에 시작하자 먼저 편집기에서 폴더를 열고이 폴더에서 두 개의 파일을 만듭니다 첫 번째는 indexhtml이고 두 번째는 Style

css입니다 Indexhtml 파일 간단한 HTML5 스 니펫을 만들고 제목을 변경합니다 그 후에 stylecss 파일을 링크 할 것입니다

body 태그에서 텍스트가있는 간단한 구분 태그를 만듭니다 Center 클래스 이 division 태그에서 앵커 태그를 삽입하고 Hover 텍스트를 지정합니다 이 파일에서 stylecss를 클릭하여 텍스트 Centere 클래스를 만들고 텍스트 정렬을 지정하십시오 센터 마진 – 상위 20 % 이제 페이지 중앙의 텍스트를 볼 수 있습니다

indexhtml 파일을 클릭하고 앵커 태그에 대해 호버 경계 클래스를 지정하십시오 stylecss 파일에서 우리는 호버 경계 클래스를 만들 것입니다 글꼴 종류, 글꼴 크기 80px 텍스트 장식 없음 위치 상대 지정 마우스 오버 테두리 클래스에 color 속성을 지정하기 전에 먼저 그라디언트를 지정합니다

body 태그에 색상 그래서 브라우저에 uigradientcom을 입력하십시오 이 웹 사이트에서 그라데이션을 클릭하고 CSS 링크를 클릭하고이 코드를 복사 한 다음 그것을 몸에 붙여라 이제 페이지 배경에 그라디언트가 표시됩니다

이제 호버 (hover) 경계 클래스에 대해 색상을 지정합니다 그런 다음 마우스 오른쪽 버튼을 클릭하여 호버 경계 클래스를 만듭니다 내용, 너비 5 %, 높이 7px 배경색 빨간색 위치 절대 하단 지정 0 % 이제 오른쪽 하단에 테두리가 표시됩니다 경계의 폭을 늘리고 왼쪽 값을 50 %로 지정합니다

그런 다음 테두리 반경과 전환 속성을 지정합니다 이 테두리에 그라데이션을 지정할 수도 있습니다 UI 그라데이션에서 테두리 그라디언트 색상을 선택하십시오 복사하여 여기에 붙여 넣으십시오 이 웹 사이트에서 다른 그라디언트를 선택할 수 있습니다

또한 색상 정렬을 지정합니다 오른쪽에서 왼쪽으로 또는 왼쪽에서 오른쪽으로 설정할 수 있습니다 페이지의 배경 그라디언트를 변경하고 테두리를 변경하고 싶었습니다 그라디언트 색상 그래서 나는 그것을 바꿀 것이다

그 다음에는 호버 (hover) 테두리 클래스를 선택한 후에 호버 효과를 만듭니다 그래서 우리는 호버 (hover) 테두리 클래스를 명시 할 것이다 먼저 호버 경계 클래스에 호버 효과를 지정하고 after selector 프로젝트에서도 똑같이하십시오 호버 효과에서 지정된 왼쪽 속성을 0 %로 설정합니다

그 후 너비 값을 0 %로 변경하고 호버 효과에서 너비를 100 %로 지정합니다 이제이 놀라운 경계 효과를 보게 될 것입니다 이제 다른 애니메이션을 만들어 보겠습니다 너비 속성을 제거하고 선택자 클래스 뒤에 border를 지정하면 너비가 15 %로 지정됩니다 왼쪽 속성을 변경하십시오

이 속성을 80 %로 변경하십시오 이제 두 번째 애니메이션이 보입니다 탐색 메뉴에 대한 애니메이션을 선택할 수 있습니다 그래서 그것은이 튜토리얼을위한 것이다 이 비디오처럼 당신이 유용한 것을 찾으면 일일 수업료를 구독하십시오

우리는 다음 강의를 보게 될 것입니다 그때까지 행복하게 지켜봐주세요