html5 및 css3 동적 버블 버튼 구현-H5 튜토리얼-php.cn

html5 및 css3 동적 버블 버튼 구현

不言

풀어 주다： 2018-06-12 13:41:36

원래의

3433명이 탐색했습니다.

우리는 JavaScript를 사용하지 않고 CSS3에 대한 다양한 배경과 애니메이션의 기능을 갖춘 유용한 애니메이션 버튼 세트를 만들고 있습니다. 이 버튼 팩을 사용하면 웹 페이지의 모든 링크를 애니메이션 버튼으로 쉽게 바꿀 수 있습니다. 클래스 이름을 지정하기만 하면 됩니다. 필요하신 분들은 참고하시면 됩니다

이번에는 CSS3의 다양한 배경과 애니메이션의 힘으로 유용한 애니메이션 버튼 세트를 만들어보겠습니다. 이 버튼 팩을 사용하면 클래스 이름만 지정하면 웹 페이지의 모든 링크를 애니메이션 버튼으로 쉽게 바꿀 수 있습니다. JavaScript가 필요하지 않습니다. 추가 클래스 이름을 지정하여 4가지 색상 테마와 3가지 크기도 사용할 수 있습니다.
웹페이지의 일반 링크를 멋진 애니메이션 CSS3 버튼으로 바꾸려면 버튼 클래스와 지원되는 색상 중 하나를 지정하기만 하면 됩니다. 아래 몇 가지 예를 참조하세요.

<a href="#" class="button blue big">Download</a> 
<a href="#" class="button blue medium">Submit</a> 
<a href="#" class="button small blue rounded">Submit</a>

로그인 후 복사

에는 파란색, 녹색, 주황색, 회색의 네 가지 색상 클래스가 있습니다. 위 링크에 할당된 나머지 클래스는 선택 사항입니다. 소형, 중형, 대형 중에서 하나의 카테고리를 선택할 수 있으며, 둥근형 카테고리를 선택하면 좀 더 둥근 버전의 버튼을 만들 수 있습니다.
효과 시연
효과를 보려면 Chrome 및 Firefox와 같은 표준 브라우저를 사용하는 것이 좋습니다. IE 9에서도 일부 비호환성이 있습니다.

모든 애니메이션 버튼의 CSS 코드는button.css에 있습니다. 이를 통해 기존 프로젝트에 쉽게 들어가서 사용할 수 있습니다.
아래 코드 전체에서 일부 위치에 동일한 속성의 두 가지 버전을 정의했습니다. 이는 브라우저가 CSS 정의를 처리하는 방식과 관련이 있습니다. 그들은 규칙을 하나씩 분석하고 적용하며, 이해하지 못하는 것은 무시합니다. 이런 식으로 우리는 바닐라 버전인 모든 규칙과 이전 규칙을 무시하는 CSS3 지원 규칙을 이해할 수 있습니다.
가장 먼저 해야 할 일은 버튼 클래스를 정의하는 것입니다. 이는 위치 지정, 글꼴 및 배경 스타일을 적용하는 버튼의 백본입니다.
첫 번째는 글꼴과 관련된 스타일이며, 이후 속성은 다음과 같이 표시됩니다. 인라인 블록으로 설정되어 주변의 텍스트와 같은 줄에 배치될 수 있지만(인라인 요소처럼) 패딩과 여백이 있는 측면 블록과도 같습니다.
한번 보면 각 버튼에 4개의 배경 이미지가 적용되어 있는 것을 볼 수 있습니다. 무섭게 들리지만 실제로는 서버에서 하나의 파일만 요청됩니다. 처음 두 배경, 즉 아래 그림에서 볼 수 있는 왼쪽 하단과 오른쪽 상단의 부분 거품 이미지이고, 나머지 두 개는 순수한 CSS 그라데이션입니다.
위에서 언급했듯이 거품의 배경은 배경 위치 속성에 따라 오프셋된 두 개의 별도 이미지로 표시됩니다. CSS3 전환 속성을 사용하여 슬라이드 상단 또는 하단에 두 가지 버전의 배경 이미지가 있는 애니메이션을 정의하여 버튼을 가리킬 때 거품 효과를 생성했습니다.

/* BlueButton */ 
.blue.button{ 
color:#0f4b6d !important; 
border:1px solid #84acc3 !important; 
/* A fallback background color */ 
background-color: #48b5f2; 
/* Specifying a version with gradients according to */ 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), 
-moz-linear-gradient(#4fbbf7, #3faeeb); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); 
} 
.blue.button:hover{ 
background-color:#63c7fe; 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), 
-moz-linear-gradient(#63c7fe, #58bef7); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); 
}

로그인 후 복사

각 색상 클래스는 버튼의 텍스트 라벨 색상, 텍스트 그림자 및 배경 이미지와 같은 고유한 속성 세트를 정의합니다. 여러 이미지를 추가하기 위해 배경 속성 버튼을 사용했다는 점에 유의하세요. 이들은 계층 구조의 최상위에 있으며 먼저 나타나며 위에서 정의됩니다.
현재 Mozilla 및 Webkit 브라우저만 CSS 그라데이션을 지원하지만 구문은 완전히 다릅니다. 나머지 브라우저에는 대체 배경색이 표시됩니다. 무료 버전의 그래디언트 규칙에 대한 접두어가 포함되지 않았다는 것을 눈치채셨을 것입니다. 이는 그래디언트가 아직 공식적으로 CSS 사양의 일부가 아니며 선호되는 구문 프로토콜이 없기 때문입니다.
위 스니펫에서 선형 그래디언트와 그 위에 방사형 그래디언트를 정의한 것을 볼 수 있습니다. WebKit과 Mozilla의 구문을 사용하여 그라디언트를 보다 원활하게 혼합하기 위해 그라디언트의 외부 색상을 완전히 투명하게 만드는 RGBA 방사형 중 하나를 정의합니다.
이로써 CSS3 애니메이션 버블 버튼이 완성되었습니다!
요약
이 버튼은 완전히 CSS를 기반으로 하며 통합은 매우 간단합니다. 버튼 폴더를 프로젝트 어딘가에 놓으면 됩니다. CSS 파일을 수정하여 자신만의 색상과 모양을 만들 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!