css3 矢印効果_html/css_WEB-ITnose

css3 Record1

CSS を使用して矢印効果を作成しようとしました
アイデアは、それぞれ疑似要素を設定することで、span と span サブ要素 i を介して 2 つの矢印を構築することですが、構築された矢印の 2 つの線の高さは、 i は 0、ホバーすると、漸近的なアニメーション効果は、i 矢印の高さの変化と同じ角度の回転です

css3 の知識:

transition

transform

疑似要素::before:: after

jsfiddle デモ

transition

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

transtion-property Zhang Xinxu 先生のブログに記載されている CSS3 トランジション プロパティの使用リファレンス ガイドを参照してください
(トランスフォームはトランジション プロパティとしても使用できます)

transform

トランスフォームを設定するとき矢印が回転し始めます - 原点の理解が少し混乱しています (幾何学的に回転する方法がわからないと突然感じました...2333)
後で座標を描画すると、基点 (0) が明確になりました。 ,0,0) は原点であり、デフォルト値は (50%, 50%, 0 ) で、これは平面の中点です。

えー

上記のコードは、X 軸で 50% オフセット、50% です。右へのオフセット、Y 軸上で 70% のオフセット、および下方向へのオフセット 70% です。

疑似要素

注意が必要なことは、
コンテンツが '' である場合でも、この属性を持たなければならないということです。たとえば、次のコードでは、それらはすべて i の子要素です。