はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ 仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 コード <a href="#" class="button change-bord

CSS3で背景画像全面表示（Background Cover）でもマウスオーバーで拡大アニメーション 最近サムネイルなどでマウスオーバーすると画像がぐいんって拡大表示するアニメーションをよく見ます。 あれはbackground-sizeとかアニメーションさせれば簡単にできそうですが、coverとかですでにsize指定してるときの方法をご紹介します。 投稿日2015年09月09日 更新日2015年09月09日 HTML innerはむだな気がしますが、z-indexを制御する用に設置しています。 html <div class="bg-scale"> <div class="inner"> <p>Background Scale Animation</p> <a href="#" class="btn-more">Article</a> </div> </div> 背景画像をafter擬似要

<!-- イメージです --> <ul> <li> <span>(:before)</span> リストです <span>(:after)</span> </li> </ul> このようなhtmlがあるというイメージでcssを書くことが出来るため、デザインの幅がとても広がります。 あくまで「擬似要素」であるため、実際に上記のようなhtmlが出力されるわけではありません。 無駄なhtmlが出力されないので、htmlを汚さずにセマンティック？な感じでいけるのもメリットですね。ちなみに:before,:after要素はインライン要素です。

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・

iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど

.inner{ width:300px; height:300px; position:absolute; top:50%; left:50%; margin-left:150px; margin-top:-150px; /* margin-left:-50%;としたいけど、marginが%を参照するときは包含ブロック（自分を囲っている要素の横幅を基準に計算する） */ /* 仮にouterのwidth:100%;が1000pxの値だとすると.innerのmargin-left:-50%;は-500pxになってしまう */ }