1

CSS :before および :after 擬似要素で作成された六角形があります。この Web サイトで効果を再現しようとしています: http://www.upperfirst.com (キャンバスを使用していることは承知しています)

問題は、複数の要素を使用すると、ホバー時のサイズの増加が適切にアニメーション化されないことです。代わりに :before と :after を境界線で使用して、アニメーションを修正しました。画像を機能させたいのですが、境界線の画像と中間部分の画像を並べてシームレスに見せる方法がわかりません。

ここに私がこれまでに持っているもののフィドルがあります: http://jsfiddle.net/uwZ8w/

ありがとう！

4

1 に答える 1

1

この答えは、私の六角形のテクニックを使用している改訂されたコードに基づいています。あなたが指摘したグラフィックの配置の問題を回避することに関して、私は2つの提案があります。

  1. background-size現在行っているような拡大縮小を回避するために、画像をすでに必要なサイズに拡大縮小してください。
  2. .inner同様に、divの幅と高さのスケーリングは避けてください（これを行う必要はありません。divおよびクラス分けした直接の子と200%同じサイズである必要があります）。しかし、それに関しては....hexagon.before.after

... （コードが乱雑にならないように）疑似要素.innerの代わりにdivを使用した理由に興味があります。:before疑似要素が何であるかを理解していないように思わcontent: '';れます（ .innercssにが含まれているため、疑似要素ではなく実際の要素である場合は関係ありません）。それか、疑似要素から実際の要素に切り替えたときに誤ってそのコードをそこに残してしまったdiv（何らかの理由でその切り替えが行われた）。

于 2012-05-28T20:22:28.810 に答える