HTML5/CSS3을 사용하여 5단계(그림 및 텍스트)로 스티커 메모에 대한 특수 효과 코드 예제를 빠르게 생성

요약

이 기사에서는 HTML5/CSS3을 사용하여 단 5단계로 스티커 메모 효과 HTML을 만드는 방법을 보여줍니다. 페이지, 렌더링

(참고: 사진 속 텍스트는 순전히 조작되었으며 유머러스한 목적으로 사용되었습니다. 유사점은 순전히 우연입니다. 감사합니다!)

참고: 이 효과는 Safari, Chrome, Firefox 및 Opera에서 볼 수 있습니다. HTML5에 대한 불완전한 지원으로 인해 IE에서는 이 효과를 볼 수 없습니다.

1단계: 기본 HTML 및 사각형 만들기

먼저 기본 HTML 구조를 추가하고 기본 사각형을 만듭니다. 코드는 다음과 같습니다.

    

Dudu：
最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!


汤姆大叔：
Team的一个成员去了Microsoft做SDE3，又得hire new member了


技术弟弟：
O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!


Artech：
WCF的帖子真是少，看来我得多发点帖子让大家学习呢


吉日嘎拉：
将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情


某武林高手：
低于25000块的面试再也不去了，它grandma的

각각에 href를 추가합니다. note 연결, 주로 키보드 액세스를 지원하기 위한 CSS 코드는 다음과 같습니다.

{:;:;}{:;:;:;:;:;}{:;:;}{:;}{:;:;}{:;:;:;:;:;:;:;}{:;:;}

효과는 다음과 같습니다.

2단계: 그림자 및 필기체 필기체

Google에서 글꼴 API 먼저 Google API에 대한 호출을 추가합니다:

<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">

그런 다음

참조 를 이 글꼴에 설정합니다:

{:;:;:;}{:;:;}

, 각 브라우저는 아직 완벽하게 지원되지 않으므로 별도로 처리해야 합니다. 코드는 다음과 같습니다.

{:;:;:;:;:;:;:; :; :; :;}

효과는 다음과 같습니다.

3단계: 정사각형 기울이기

정사각형을 기울이려면 li->a에 다음 코드를 추가해야 합니다.

{:;:;:;}

하지만 모든 기울기 대신 무작위로 정사각형 기울기를 사용하려면 새로운 CSS3 선택기를 사용하여 정사각형을 만들어야 합니다. 2회 기울일 때마다 4도, 3회 기울일 때마다, -3도마다, 5회 기울일 때마다 5도:

{:;:;:;:;:;}{:;:;:;:;:;}{:;:;:;:;:;}

효과는 다음과 같습니다:

4단계: 마우스 오버 및 포커스 중에 사각형 크기 조정

호버 및 포커스 중에 크기 조정 효과 얻기 , 다음 코드를 추가해야 합니다:

{:;:;:;:;:;:;:;:;}

z-index 설정 값 5는 확대할 때 사각형이 다른 사각형을 덮을 수 있도록 하는 것입니다. 동시에 초점도 설정되므로 액세스 전환을 위해 Tab 키도 지원됩니다.

5단계: 부드러운 전환 및 색상 추가

특수 효과 네 번째 단계에서는 부드러운

애니메이션 효과를 얻기 위해 Transition을 추가할 수 있습니다. 또한, 먼저 ul->li에서 색상을 다르게 설정할 수 있습니다. ->a:

<span style="color: #800000;">  -moz-transition:-moz-transform .15s linear;  <br>  -o-transition:-o-transform .15s linear;  <br>  -webkit-transition:-webkit-transform .15s linear;  </span>

그런 다음 짝수와 3n에서 서로 다른 색상을 정의합니다.

{:;:;:;:;:;:;}{:;:;:;:;:;:;}

이런 식으로 최종 효과가 완성됩니다.

요약

지금까지 HTML5와 CSS3의 기본 기능을 사용하여 꽤 좋은 스티커 메모를 만들었습니다. 몇 가지 고급 기능을 추가하면 HTML5/CSS3가 실제로 매우 강력하다는 효과가 있습니다. , JavaScript와 결합하는 등 훨씬 더 멋진 효과를 얻을 수 있습니다. 이는 Dang Knight Brick이 제공한 HTML5 실험실 시리즈에서 확인할 수 있습니다.

위 내용은 HTML5/CSS3을 사용하여 5단계(그림 및 텍스트)로 스티커 메모에 대한 특수 효과 코드 예제를 빠르게 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!