エフェクト実装事例1_html/css_WEB-ITnose

今日は、いつものように、最初にレンダリングを紹介します。

説明:

1. この四角形の単語は省略しますが、上の「クリック」プロンプトによってブロックされないようにテキスト ブロックの幅を制御する必要があります。

2. 「クリックされた」プロンプトに関しては、次のように実装しました: 大きい div には「position:relative;」、小さい div には「position:absolute;」を設定します。をクリックすると、小さなdivに進みます。divの回転変換と上部と右側などの詳細の調整が完了します。

ヒント:

1. 回転時に回転中心をリセットできます。transform-origin を使用します (具体的な使用方法の詳細を検索してください)。デフォルトの回転中心は要素自体の中心位置です。 Small div 高さ、幅、上、右などの値が回転効果に影響します。回転角度のデフォルトは 45 度で、その他の値は効果に応じて調整できます。

3. 大きな div の外側にある小さな div を非表示にするために、必ず overflow:hidden; を追加してください。

レンダリングは次のとおりです:

HTML コードは次のとおりです:

<div id="container">    <div id="square">        <div id="tip">已点</div>    </div></div>

CSS コードは次のとおりです:

 1 *{ 2     margin: 0; 3     padding: 0; 4 } 5 #container { 6     text-align: center; 7 } 8 #square { 9     position: relative;10     background-color: #DBEDFD;11     width: 100px;12     height: 100px;13     margin: 50px auto;14     overflow:hidden;15 }16 #tip {17     height: 20%;18     width: 80%;19     position: absolute;20     top: 10%;21     right: -20%;22     transform: rotate(45deg);23     background-color: white;24 }

皆さんが効果を達成するためのより良い方法を提供できることを願っています、O(∩_∩)Oありがとうございます