단 5단계만으로 HTML5/CSS3를 사용하여 스티커 메모 효과(그림)_html5 튜토리얼 팁을 빠르게 만들 수 있습니다.-H5 튜토리얼-php.cn

단 5단계만으로 HTML5/CSS3를 사용하여 스티커 메모 효과(그림)_html5 튜토리얼 팁을 빠르게 만들 수 있습니다.

WBOY

풀어 주다： 2016-05-16 15:51:03

원래의

1247명이 탐색했습니다.

이 기사에서는 HTML5/CSS3를 사용하여 단 5단계로 스티커 메모 효과가 있는 HTML 페이지를 만드는 방법을 보여줍니다.
(참고: 그림의 텍스트는 순전히 조작된 것이며, ) 모든 유사점은 순전히 우연입니다. 감사합니다! )

참고: 이 효과는 HTML5, IE에 대한 불완전한 지원으로 인해 볼 수 있습니다. 효과.
1단계: 기본 HTML 및 사각형 만들기
먼저 기본 HTML 구조를 추가하고 기본 사각형을 구성하면 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

두두 :

요즘 왜 미인이 안 올라오나요? 헤드라인을 꼭 추천하겠습니다!추천합니다!

지리 갈라:
🎜>
한 사람이 할 수 있는 일이 제한적입니다.

어느 무술 고수:

다시는 25,000위안 미만으로는 면접에 가지 않겠습니다. 할머니입니다

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

코드 복사

코드는 다음과 같습니다.

*{ 여백:0; padding:0; } body{

font-family:arial,sans-serif

font-size:100%;

여백:3em ;
배경:#666;
색상:#fff
}
h2,p{
글꼴 크기:100%; :normal;
}
ul,li{
list-style:none;
ul{
overflow:hidden;
}
ul li a {
텍스트 장식:없음
배경:#ffc
높이:10em; :10em;
padding:1em;
}
ul li{
margin:1em;
float:left;

2단계: 그림자 및 필기체 필기체
이 단계에서는 사각형의 그림자 효과를 구현하고 글꼴을 필기체(영어만 제공)로 변경하려고 합니다. 글꼴 API 지원, 먼저 Google API 호출을 추가하세요.

코드 복사

코드는 다음과 같습니다.

그런 다음 이 글꼴을 참조하도록 설정하세요.

코드 복사

코드는 다음과 같습니다:

ul li h2

{

font-size: 140%
font-weight:
padding-bottom: 10px;

}
ul li p
{
font-family: "Reenie Beanie" ,arial,sans-serif,Microsoft Yahei

font-size: 110%

}
섀도우에 관해서는 각 브라우저가 완벽하게 지원하지 않기 때문에 별도로 코드를 처리해야 합니다.

코드 복사

코드는 다음과 같습니다.

ul li a
{
text-꾸밈: 없음
color: #000
배경; : #ffc;
높이: 10em;
너비: 10em; /* Firefox */
-moz-box-shadow rgba(33,33,33 ,1); /* 사파리 크롬 */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7) /* 오페라 */
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

효과는 다음과 같습니다.

3단계: 사각형을 기울이세요

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

코드 복사 코드는 다음과 같습니다:

ul li a{

-webkit-transform:rotate(-6deg)
-o-transform:rotate( -6deg);
-moz-transform:rotate(-6deg) ;
}

그러나 정사각형을 모두 기울이는 대신 무작위로 기울이려면 2도와 3도마다 사각형을 4도씩 기울이는 새로운 CSS3 선택기 각 기울기는 -3도이고, 6도는 5도입니다.

복사 code코드는 다음과 같습니다.

ul li:nth-child(even) a{

-o-transform:rotate(4deg)
-webkit-transform:rotate(4deg);
위치:상대적

}
ul li:nth -child(3n) a{
-o-transform:rotate(-3deg)
-webkit-transform:rotate(-3deg)
-moz-transform:rotate(-3deg); 🎜>위치:상대;
상위:-5px;}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg)-webkit -transform:rotate(5deg);
-moz-transform:rotate(5deg );
위치:상대적;
}

효과는 다음과 같습니다:

4단계: 호버 및 포커스 확대/축소 사각형
호버 및 포커스 중에 확대/축소 효과를 얻으려면 다음 코드를 추가해야 합니다.

코드 복사

코드는 다음과 같습니다.

ul li a:hover,ul li a:focus{ -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7 ) -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 🎜>box-shadow:10px 10px 7px rgba(0,0,0,.7); -webkit-transform: scale(1.25)

-moz-transform: scale(1.25); -o-transform: scale(1.25);

position:relative;

z- index:5;
}

z-index를 5로 설정하면 사각형이 다른 부분을 덮을 수 있습니다. 확대하면 사각형이 표시됩니다. 동시에 초점도 설정되므로 Tab 키 전환 액세스도 지원합니다. 효과는 다음과 같습니다.

5단계: 부드러운 전환 및 색상 추가
4단계의 특수 효과는 약간 뻣뻣해 보입니다. 또한 부드러운 애니메이션 효과를 얻기 위해 전환을 추가할 수 있으며, 먼저 ul->li->a에 전환을 추가할 수 있습니다. :

코드 복사

코드는 다음과 같습니다.

-moz-transition: -moz-transform .15s 선형;

-o-transform:-o-transform .15s 선형 -webkit-transform .15s 선형 짝수와 3n에 서로 다른 색상을 정의하세요:

코드 복사

코드는 다음과 같습니다.

ul li:nth-child(even) a{

-o-transform:rotate(4deg) -webkit- 변환:rotate(4deg) -moz-transform:rotate(4deg) ); 위치:상대; 배경:#cfc

}

ul li:nth-child(3n)-o-transform: 회전(-3deg);

-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg)
위치:-5px; 🎜>배경:#ccf
}

이렇게 해서 최종 효과를 완성했습니다.

요약
지금까지 HTML5와 CSS3의 기본 기능을 사용하여 꽤 좋은 스티커 메모 효과를 만들었습니다. 정말 강력합니다. JavaScript와 결합하는 등 몇 가지 고급 기능을 추가하면 훨씬 더 멋진 효과를 얻을 수 있습니다. Dang Knight Brick이 제공한 HTML5 Lab 시리즈 기사에서 이를 확인할 수 있습니다.
또한: 사진의 텍스트는 순전히 조작된 것입니다. 모든 유사점은 순전히 우연입니다. 감사합니다!

단 5단계만으로 HTML5/CSS3를 사용하여 스티커 메모 효과(그림)_html5 튜토리얼 팁을 빠르게 만들 수 있습니다.

두두 :

기술자:

지리 갈라:

어느 무술 고수: