이 기사에서 보여줄 것은 HTML5/CSS3을 사용하여 5 단계로 스티커 메모가있는 HTML 페이지를 만드는 방법입니다. 렌더링은 다음과 같습니다.
(참고 : 그림의 텍스트는 순전히 제작되고 재미 있습니다. 유사성이 있다면 순전히 우연의 일치입니다. 감사합니다!)
참고 :이 효과는 Safari, Chrome, Firefox 및 Opera에서 볼 수 있습니다. html5에 대한 지원은 IE에서 완료되지 않기 때문에 효과를 볼 수 없습니다.
1 단계 : 기본 HTML 및 사각형을 만듭니다
먼저 기본 HTML 구조를 추가하고 기본 정사각형을 빌드하면 코드는 다음과 같습니다.
<ul>
<li> <a href = "#">
<H2> Dudu : </h2>
<p> 최근에 아름다운 게시물이 없었던 이유는 무엇입니까? 나는 확실히 헤드 라인 추천을 할 것입니다. 추천! 추천! </p>
</a> </li>
<li> <a href = "#">
<H2> 톰 삼촌 : </h2>
<p> 팀원은 SDE3을하기 위해 Microsoft로 가서 새로운 멤버를 다시 고용해야했습니다 </p>
</a> </li>
<li> <a href = "#">
<H2> 기술 형제 : </h2>
<p> o2ds는 내가 번역 한 책과 동일합니다. 나는 그보다 더 빨리 번역해야합니다. 밤에 초과 근무, 빠르게 일하십시오! 빠른! 빠른! </p>
</a> </li>
<li> <a href = "#">
<H2> artech : </h2>
<p> WCF에는 게시물이 거의 없습니다. 모두가 배우려면 더 많은 게시물을 게시 해야하는 것 같습니다 </p>
</a> </li>
<li> <a href = "#">
<H2> jirigala : </h2>
<p> 권한 관리 및 워크 플로 관리를 내 능력의 극단적으로 만들기 위해 사람은 거의 일을 잘 할 수 있습니다 </p>
</a> </li>
<li> <a href = "#">
<H2> 무술 마스터 : </h2>
<p> 나는 25,000 위안 미만의 인터뷰에 가지 않을 것입니다, 그것은 할머니입니다 </p>
</a> </li>
</ul>
각 노트는 주로 키보드 액세스를 지원하기 위해 HREF 연결을 추가하며 CSS 코드는 다음과 같습니다.
*{
여백 : 0;
패딩 : 0;
}
몸{
Font-Family : Arial, Sans-Serif;
글꼴 크기 : 100%;
여백 : 3em;
배경 :#666;
색상 : #ffff;
}
H2, P {
글꼴 크기 : 100%;
글꼴 중량 : 정상;
}
ul, li {
목록 스타일 : 없음;
}
ul {
오버플로 : 숨겨진;
패딩 : 3em;
}
ul li a {
텍스트 결정 : 없음;
색상 :#000;
배경 : #ffc;
디스플레이 : 블록;
높이 : 10em;
너비 : 10em;
패딩 : 1em;
}
ul li {
여백 : 1em;
플로트 : 왼쪽;
}
효과는 다음과 같습니다.
2 단계 : 그림자와 필기 필기체 캐릭터
이 단계는 사각형의 그림자 효과를 실현하고 글꼴을 세이지로 바꾸는 것입니다 (영어 만 해당). Google은 FONT API를 지원하기 때문에 직접 사용할 수 있습니다. 먼저 Google API에 통화를 추가하십시오.
<link href = "http://fonts.googleapis.com/css?family=creenie+beanie:regular"rel = "Stylesheet"type = "text/css">
그런 다음이 글꼴에 대한 참조를 설정하십시오.
ul li H2
{
글꼴 크기 : 140%;
글꼴 중량 : 대담한;
패딩 바닥 : 10px;
}
ul li p
{
Font-Family : "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
글꼴 크기 : 110%;
}
그림자와 관련하여 각 브라우저는 완전히 지원되지 않으므로 별도로 처리해야하며 코드는 다음과 같습니다.
ul li a
{
텍스트 결정 : 없음;
색상 : #000;
배경 : #ffc;
디스플레이 : 블록;
높이 : 10em;
너비 : 10em;
패딩 : 1em; / * Firefox */
-Moz-Box-Shadow : 5PX 5PX 7PX 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 변환 : 회전 (-6deg);
-o-transform : 회전 (-6deg);
-Moz 변환 : 회전 (-6deg);
}
그러나 모든 기울기 대신 사각형을 무작위로 기울이려면 새로운 CSS3 선택기를 사용하여 사각형이 2 개마다 4도, 3 개의 음의 3도, 6 개마다 5도를 기울여야합니다.
ul li : nth-Child (심지어) a {
-o-transform : 회전 (4deg);
-webkit 변환 : 회전 (4deg);
-Moz 변환 : 회전 (4deg);
위치 : 상대;
상단 : 5px;
}
ul li : nth-Child (3n) a {
-o-transform : 회전 (-3deg);
-webkit-transform : 회전 (-3deg);
-Moz 변환 : 회전 (-3deg);
위치 : 상대;
상단 : -5px;
}
ul li : nth-Child (5n) a {
-o-transform : 회전 (5deg);
-webkit-transform : 회전 (5deg);
-Moz 변환 : 회전 (5deg);
위치 : 상대;
상단 : -10px;
}
효과는 다음과 같습니다.
4 단계 : 호버와 초점을 맞추면 정사각형을 스케일링합니다
호버와 초점을 맞추면 스케일링 효과를 달성하려면 다음 코드를 추가해야합니다.
ul li a : 호버, ul li a : 포커스 {
-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 변환 : 스케일 (1.25);
-Moz 변환 : 스케일 (1.25);
-O- 변형 : 스케일 (1.25);
위치 : 상대;
Z- 인덱스 : 5;
}
Z-index를 5로 설정하면 확대시 정사각형이 다른 사각형을 덮을 수 있습니다. 동시에 초점이 설정되어 있기 때문에 탭 키 스위칭 액세스도 지원하며 효과는 다음과 같습니다.
5 단계 : 부드러운 전환 및 색상을 추가합니다
네 번째 단계의 특수 효과는 약간 뻣뻣 해 보입니다. 원활한 애니메이션 효과를 달성하기 위해 전환을 추가 할 수 있습니다. 또한 색상은 비교적 단일입니다. 우리는 다른 색상을 설정할 수 있습니다. 먼저, ul-> li-> a에서 전환을 추가하십시오.
-Moz-transition : -moz transform .15s 선형;
-O- 변환 : -o-transform .15S 선형;
-webkit-transition : -webkit-transform .15S 선형;
그런 다음 다른 색상을 짝수와 3N에서 정의하십시오.
ul li : nth-Child (심지어) a {
-o-transform : 회전 (4deg);
-webkit 변환 : 회전 (4deg);
-Moz 변환 : 회전 (4deg);
위치 : 상대;
상단 : 5px;
배경 : #CFC;
}
ul li : nth-Child (3n) a {
-o-transform : 회전 (-3deg);
-webkit-transform : 회전 (-3deg);
-Moz 변환 : 회전 (-3deg);
위치 : 상대;
상단 : -5px;
배경 : #CCF;
}
이런 식으로, 우리의 최종 효과는 다음과 같습니다.
요약
이 시점에서 우리는 HTML5 및 CSS3의 기본 기능을 사용하여 꽤 좋은 음표 기둥 효과를 만듭니다. HTML5/CSS3은 실제로 매우 강력합니다. JavaScript와 결합하는 것과 같은 고급 기능을 추가하면 더 멋진 효과를 얻을 수 있습니다. Diante Brick이 제공 한 HTML5 실험실 시리즈 기사에서 볼 수 있습니다.
또한 : 그림의 텍스트는 순전히 제작되었습니다. 유사성이 있다면 순전히 우연의 일치입니다. 감사합니다!