CSS を使用してグラフィック変形ポップアップ効果を作成する

この記事では主に、CSSを使用してグラフィック変形ポップアップエフェクトを作成する例を紹介します。ポップアップウィンドウのサイズはjQueryを使用して変更できます。必要な場合はそれを参照してください。

ポップアップフォームは一般的に使用されます。インタラクティブなアニメーション体験の時代では、Web ポップアップでも、今日共有されている CSS 変形モーダル ウィンドウなどの新しいアイデアを思いつくことができます。

ユーザーがボタンをクリックすると、ボタンが全画面画面に変わり、コンテンツが表示されます。表示プロセス全体がスムーズでフレンドリーです。新しいプロジェクトで試してみるとよいでしょう。

デモページ: http://codyhouse.co/gem/morphing-modal-window/
「Fire Modal Window」ボタンをクリックすると、ボタンが画面全体に達するまで徐々に大きくなります。 GIF のデモは次のとおりです:

使用方法のチュートリアル

このコードは Chrome、Firefox、Safari、Opera と互換性があります。IE にはバージョン 9.0 以降 (IE9+) が必要です

ステップ 1: HTML レイアウトを作成します

<section class="cd-section">
<!-- section content here -->
<p class="cd-modal-action">
<a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <!— 这是窗体按钮 -->
<span class="cd-modal-bg"></span>
</p>
<p class="cd-modal">
<p class="cd-modal-content">
<!— 这是窗体内容区域 -->
</p>
</p>
<a href="#0" class="cd-modal-close">Close</a> <!— 这是关闭按钮 -->
</section>

ステップ 2: CSS スタイルを追加します

.cd-modal-action {   
position: relative;   
}   
.cd-modal-action .btn {   
width: 12.5em;   
height: 4em;   
background-color: #123758;   
border-radius: 5em;   
transition: color 0.2s 0.3s, width 0.3s 0s;   
}   
.cd-modal-action .btn.to-circle {   
width: 4em;   
color: transparent;   
transition: color 0.2s 0s, width 0.3s 0.2s;   
}   
.cd-modal-action .cd-modal-bg {   
position: absolute;   
top: 0;   
left: 50%;   
transform: translateX(-2em);   
width: 4em;   
height: 4em;   
background-color: #123758;   
border-radius: 50%;   
opacity: 0;   
visibility: hidden;   
transition: visibility 0s 0.5s;   
}   
.cd-modal-action .cd-modal-bg.is-visible {   
opacity: 1;   
visibility: visible;   
}

ステップ 3: jQuery を追加します

このコードは jQuery を使用しており、次のコードを通じてウィンドウ サイズを変更できます。

var btnRadius = $('.cd-modal-bg').width()/2,   
left = $('.cd-modal-bg').offset().left + btnRadius,   
top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(),   
scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());   
function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {   
var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),   
maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);   
return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);   
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

画像の周囲にテキストを折り返す効果を実現する CSS

CSS3 を使用して円形のプログレス バーを実装する方法

CSS3 を使用してグレースケール フィルターを作成し、黒と黒のプログレス バーを作成する白い写真効果

以上がCSS を使用してグラフィック変形ポップアップ効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。