우리가 해결할 다음 일은 몸에 대한 배경입니다.
그리고 이것은 사실상 배경 이미지가 아닙니다. 우리가 이것을 잘 보았을 때 잘 작동한다는 것을 알았 더라면 말이죠.
그러나 실제로 그것은 CSX가 나를 위해 추가하는 그라데이션입니다.
따라서 본질적으로 선형 그래디언트를 작성할 수 있습니다. 처음부터 직접 작성하는 것보다 먼저 할 일을 할 수있는 좋은 미리 작성된 색상 그라디언트가있는 멋진 리소스를 보여 드리겠습니다. 개인적인.
따라서 그라디언트라고 불립니다.
그런 다음 화살표 키를 사용하여 일부를 볼 수있는 다양한 그라데이션이 있습니다.
그래서 나는 내가 좋아하는 것을 찾을 때까지 그냥 갔다.
그래서 우리가해야 할 일은 CSSA 코드를 클릭하거나 Enter 키를 누른 다음이 코드를 클립 보드에 복사 한 다음 본문을 선택하는 것입니다.
그래서 시체와 붙여 넣습니다.
따라서 실제로는 한 줄이지만 모든 다른 브라우저 접두사가 있습니다.
Opera 용 Chrome 용 Internet Explorer의 경우이 모든 다른 접두사.
그러나 그것이하는 것.
우리는 배경을 선형 그래디언트로 설정하고 두 색상과 그 색상의 다른 비율과 각도를 선택합니다.
그래서 우리가 우리를 새롭게한다면 지금 어떻게 생겼는지 보여 드리겠습니다.
이 멋진 그라디언트가 있습니다.
그래서 우리는 계속 놀 수 있습니다.
몇 가지를 더 살펴보고 자유롭게 사용할 수 있습니다.
내가 결정한 것은 바로 여기 보라 보라 라 불린다.
그래서 우리는 그 복사본을 클립 보드에 복사하고이 코드를 대체 할 것입니다.
이 모든 것은 새로운 그라디언트로 여기에서 또 다른 선형 그래디언트이며 다른 사람이 두 가지 색으로 각각 다른 백분율을 썼습니다.
그리고 우리는 구할 것이다.
그리고 지금 그것을 확인하십시오.
그리고 거기에 우리가 간다.
그래서 우리는 점점 가까워지고 있습니다.
우리가 작업해야 할 다음 큰 일은 아이콘입니다.
그래서 우리는 더하기 아이콘이 나타납니다.
그리고 이것이하는 일은 양식을 보여 주거나 숨기고 쓰레기통을 가지고있는 것입니다.
그 아이콘을 포함해야 할 필요가 있다는 것을 알 수 있습니다.이 아이콘은 font라는 라이브러리의 일부입니다.
굉장해.
그래서 멋진 글꼴로 이동하고 웹 사이트를위한 구글은 Fonte awesome입니다.
나는 그녀를 얻는다.
그리고 그 모든 것은 일련의 아이콘 모음입니다.
그래서 우리가 아이콘 아래를 보게되면 거기에서 볼 수 있도록 사용할 수있는 모든 아이콘의 거대한 목록이 있습니다.
따라서 우리는이 라이브러리를 우리 애플리케이션에 포함 시켜서 바로 다운로드하고 다운로드를 클릭하거나 글꼴을 사용할 수도 있습니다.
신난다 CDN뿐만 아니라 이러한 CDN 중 하나를 사용하십시오.
둘 중 하나가 작동합니다.
따라서 Jay 쿼리를 이미 다운로드 한 이후로는 CD를 사용하고 여기에 해당 링크를 복사하기 때문에 다양성을 염두에 두어야합니다.
그런 다음 색인 페이지 Timo로 이동합니다. CSSA 파일이므로 링크 태그를 추가해야합니다. 실제로 자바 스크립트 파일이나 글꼴이 아니지만 Cs 파일이므로 저장하게됩니다. 사실 미리 만들어지고 미리 만들어진 클래스를 제공하여 요소에 추가 할 수 있도록 몇 가지 예를 보여 드리겠습니다.
사용하고자하는 배터리가 비어 있거나 배터리가 3 쿼터라고 말하면 클래스를 호출해야한다는 것입니다. 대시 배터리 대시 3 대시 (cash) 대시 (cash) 대시 (cash) 대시 (dash)
H-1에 넣자.
그것은 아이콘을 나타내는 눈 태그이고 우리는 수업을하고 여기에 아무것도 넣지 않아도됩니다.
우리는 그 것을 공란으로 남겨두고 이것은 Rifan을 두려워합니다.
그리고 이것은 아이콘의 이름이며 새로 고침을 저장하고 3 쿼터 배터리 아이콘 대신 배터리 아이콘을 갖습니다.
우리는 더하기 기호와 쓰레기통을 원해서 H-1 안에 아이콘을 보관하고 클래스를 유지하지만 F.A. 대시 플러스를 원하고 자유롭게 자신의 아이콘을 사용할 수 있습니다.
당신이 굉장한 것을 찾기 위해 계속 나아가고 당신이 좋아하는 다른 것을 찾으면 연필 모양의 펜이나 연필과 종이 중 하나를 사용할 수 있기 때문에 내가 좋아하는 스타일을 찾을 수 있습니다. 오른쪽으로 넘어 가서 우리가해야 할 일은 먼저 선택하여 개를 선택하는 것입니다.
F는 대시 플러스이고 바로 그 것처럼 떠 다니게되고 새로 고침이 끝나고 이제는 올바른 사이트에서 끝납니다.
이제 쓰레기통을 다루겠습니다. 우리는 아직 애니메이션을 다루지 않을 것입니다.
우리는 X 대신에 쓰레기통을 보여 주려고합니다.
다시 돌아가서 우리가 실제로 X의 내용을 없애고 다른 전자 태그를 추가하기 위해 e-TAG에 FAA 클래스와 이름을 추가하려고합니다. 쓰레기 캔 아이콘은 FAA입니다. 쓰레기 쓰레기를 다른 스팬의 것으로 복사하겠습니다.이 페이지는 페이지가로드 될 때만 사용되지만 기존 쓰레기통에는 3 개의 쓰레기통이 있습니다.
우리는 여전히 전직을 다루고 있습니다.
그래서 우리는 여기에 우리의 자바 스크립트로 가고 싶습니다.
그리고 우리가 새로운 것을 쓸 때 X로 스팬을 추가하고 싶지는 않습니다.
아이콘을 추가하고자 할 때 따옴표가 영향을 미치지 않도록해야합니다.
따라서 작은 따옴표를 사용하여 저장하면 이제 스팬 내부에 휴지통 아이콘이 있어야합니다.
그래서 몇 가지 새로운 것을 추가합시다.
우리는 거기에 갈.
그리고 여전히 스팬의 내부에 있기 때문에 클릭 할 수 있습니다.
따라서 스팬 대신 아이콘 요소입니다.
그래서 나는 여전히 이벤트를 클릭한다.
이제이 간단한 애니메이션을 작업 해 보겠습니다.이 모든 작업은 페이지가로드 될 때 실제로 숨겨진 C 범위를 평가합니다.
그들은 제로의 부를 가지고 있습니다.
마우스를 가져 가면 실제로 폭을 40 픽셀로 늘린 다음 전환 속성을 사용하여 애니메이션으로 만듭니다.
그럼 그 중 일부를 시도해 봅시다.
우리의 CSSA 파일을 열면 가장 먼저 할 일은 스타일 스팬이므로 스팬과 우리는 그들에게 배경색으로 붉은 색 즉, 7 4 C 3 C를주고 새로 고침을 할 것입니다.
그리고 이제 우리는 그 주위에 빨간색 배경을 가지고 있습니다.
다음으로해야 할 일은 40 픽셀의 높이를주는 것입니다. 아직 많이하지 않는 것 같습니다.하지만 몇 가지 속성을 추가하면 차이가 있음을 알 수 있습니다.
20 픽셀 오른쪽에 여백을 추가하고 돌아 가자.
이제 우리가 우리가 원하는 공간을 얻을 수 있습니다.
다음으로 텍스트 정렬 센터를 지정하겠습니다. 여기서는 중간 범위에 약간의 차이가 있습니다.
중요한 아이콘 안에있는 아이콘은 아이콘을 너무 희게 만들어서 흰색으로 표시하는 것입니다.
괜찮아.
그래서 애니메이션을 사용하지 않고 처음처럼 보이게하는 방법을 보여주기 위해 항상 애니메이션을 사용합니다.
그리고 나서 우리는 그들이 움직일 때까지 그들이 숨겨 지도록 애니메이트하도록 할 것입니다.
따라서 우리는 점점 가까워지고 있지만, 우리는 수직과 수평으로 더 많은 공간을 차지할 필요가 있습니다.
그래서 저는 40 픽셀을 더해서 결국 0으로 설정하고 라인 2에서 디스플레이 2를 설정하려고합니다.
그리고 나는 지금 새롭게 해.
그리고 그것은 바로 보인다.
그래서 다음은 애니메이션을하는 것입니다.
그리고 그것이 작동하는 방식으로 실제로 너비가 0으로 설정됩니다.
그래서이 모든 범위는 제가 동맹국에 머무를 때까지 0으로되어 있습니다. 그리고 나서 우리는 그 범위에서 40이되도록 증가시킵니다.
자 이제하자.
나는 0으로 설정하고, 그 다음에 우리가 동맹국을 맴돌 았을 때, 그리고 우리가 동맹국을 맴돌 았을 때, 위에 맴돌 았던 동맹국 안에있는 스팬을 선택하기를 원합니다.
그런 다음 40 픽셀로 설정하려고합니다.
그리고 우리 자신의 버전으로 돌아가서 새로 고침하겠습니다.
범위가 사라 졌다는 것을 알 수 있습니다.
그리고 내가 마우스를 가져 가면, 스팬이 나타나고 버튼이 작동합니다.
그래서 다음 기능은 애니메이션을 적용하여 순간적으로 나타나지 않고 전환 속성을 사용합니다.
그래서 스팬에서 우리는 2 초의 트랜지션 제로 포인트를 추가 할 것입니다. 그리고 우리는 일정한 속도로 움직이는 것을 의미하는 이완을 단지 선형으로 만들 것입니다.
그리고 거기에 우리가 간다.
멋진 애니메이션이 있습니다.
아이콘이 너비가 0 픽셀 인 경우에도 아이콘이 계속 표시된다는 것을 알려주는 작은 항목이 하나 있습니다.
따라서보기가 힘들지만 여기에서 아이콘을보십시오.
내가 그 위에 올라 타지 않을 때에도 여전히 거기에 있습니다.
그래서 우리가 할 일은 스팬의 불투명도를 0으로 설정 한 다음 마우스를 올려 놓을 때 하나가되도록 설정하는 것입니다.
따라서 불투명도는 0이고 불투명도는 1.0입니다.
그리고 그것을 처리해야합니다.
이제 아이콘을 볼 수 없습니다.
거기에 그것은 다음 사라지고 그것은 전환 속성이 ​​모든 영향을 미치기 때문에뿐만 아니라 페이드 아웃.
그럼 2.2 초로 만들어 보겠습니다.
페이드 인 (fade in) 한 다음 페이드 아웃 (fade out)하는 방법에 유의하십시오.
그래서 그것은 매우 느린 버전입니다.
그리고 우리는 단지 0.2를 할 것입니다.
우리가 남긴 작은 성가신 일이 있습니다. 여기에 정말 가깝게 보이거나 크기가 커지면 입력과 작은 목록 사이에 약간의 차이가 있습니다.
하지만 지금은 그곳에 집중할 때 그 격차가 사라집니다.
그리고 내가 집중하지 않을 때 그것은 되돌아옵니다.
그래서 우리는 보이지 않는 작은 경계선을 추가 할 것입니다. 실제로 그것은 R.G.의 작은 경계선을 가질 것입니다. 0 0 0 0 0 0 우리가 집중할 때 국경과 같은 공간을 차지할 것입니다.
그래서 우리는 되돌아 가서 우리가 여기있는 입력을 좋아하고 그것을 3 개의 픽셀로 된 고체 R-Ga의 경계를 부여 할 것입니다.
제로 제로 제로
그렇게되면 결국 우리는 보이지 않는 경계를 갖게 될 것입니다.
그러나 여기에 주목하십시오. 나는 작은 격차가 없어지는대로 바로 새로 고칠 것입니다.