HTML5/CSS3 を使用して、5 つの手順で付箋用の特殊効果コード例をすばやく作成します (画像とテキスト)

要約

この記事では、HTML5/CSS3を使用して、わずか5ステップで付箋効果のあるHTMLページを作成する方法を説明します。効果の画像は次のとおりです:

(注: 画像 テキストは次のとおりです)純粋に捏造され、ユーモアの目的で使用されています。類似点はまったくの偶然です。サポートが不完全であるため、効果はわかりません。

ステップ 1: 基本的な HTML と正方形を作成する

まず、基本的な HTML 構造を追加し、基本的な正方形を構築します。 コードは次のとおりです:

    

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


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


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


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


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


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

主にキーボード アクセスをサポートするために、href 接続を追加します。は次のとおりです:

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

効果は次のとおりです:

ステップ2:シャドウと手書きの筆記体フォント

このステップでは、正方形のシャドウ効果を実現し、フォントを筆記体に変更します(英語のみ)、Google は Font

API
をサポートしているため、最初に Google API への呼び出しを追加します:

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

次に、referenceこのフォントを設定します:

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

影について各ブラウザはまだ完全にサポートされていないため、個別に処理する必要があります。 コードは次のとおりです:

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

効果は次のとおりです:

ステップ 3: 正方形を傾けます

正方形を傾けるには、li->a に次のコードを追加する必要があります:

{:;:;:;}

しかし、正方形をすべて傾けるのではなくランダムに傾けるには、新しい CSS3 セレクターを使用して正方形を 4 傾ける必要があります。 2 度ごとにマイナス 3 度、3 度ごとにマイナス 3 度、5 度ごとに 5 度:

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

効果は次のとおりです:

ステップ 4: ホバーとフォーカス中に正方形を拡大縮小します

ホバーしてフォーカスするには、次のコードを追加する必要があります:

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

Set z - ズームイン時に正方形が他の正方形をカバーできるようにインデックスは 5 です。同時に、フォーカスも設定されるため、Tab キーもサポートされますエフェクトは次のとおりです:

ステップ 5: スムーズなトランジションとカラーの追加

4 番目のステップの特殊効果は、スムーズな アニメーション

の効果を実現するために少し硬く見えます。さらに、色は比較的単一です。まず、ul->li-> でトランジションを追加します。次に、even と 3n で異なる色を定義します。で、最終的なエフェクトが完成しました:

概要

この時点で、HTML5 と CSS3 の基本を使用しました。いくつかの機能を追加すると、HTML5/CSS3 は確かに非常に強力です。 HTML5 は、JavaScript と組み合わせるなど、さらに素晴らしい効果を実現できます。これについては、実験室シリーズの記事でご覧ください。

以上がHTML5/CSS3 を使用して、5 つの手順で付箋用の特殊効果コード例をすばやく作成します (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。