ホームページ

JS特殊効果

CSS3特殊効果

CSS3 トランプの展開と折りたたみアニメーションの特殊効果

css3 トランプの展開と折りたたみのアニメーション特殊効果は、css3 svg によって生成されるクリックカードの展開と折りたたみのアニメーション効果です。

ダウンロード中プレビュー

<!DOCTYPE html>
<html>
<頭>
<メタ文字セット="UTF-8">
<title>css3 トランプの展開と折りたたみアニメーションの特殊効果</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body><script src="/demos/googlegg.js"></script>

<div class="パースペクティブ">
<div class='カードコンテナ'>
<div class="message">左側のカードをクリック</div>
<div class='カードカード-カード1'>
<div class='card__facecard__face--top'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
＆lt; Path d = "M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.234886 Z" # </svg>
</span>
</div>
<div class='card__facecard__face--btm'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
＆lt; Path d = "M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.234886 Z" # </g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード2'>
<div class='card__facecard__face--top'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" ストローク="#A68385" 変換="translate(10.035534, 10.071068) 回転(-315.000000) 平行移動(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width ="13.1923882" 高さ="13.1923882"></rect>
</g>
</svg>
</span>
</div>
<div class='card__facecard__face--btm'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" ストローク="#A68385" 変換="translate(10.035534, 10.071068) 回転(-315.000000) 平行移動(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width ="13.1923882" 高さ="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード3'>
<div class='card__facecard__face--top'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<circle id="Oval" ストローク="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
<div class='card__facecard__face--btm'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<circle id="Oval" ストローク="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード4'>
<div class='card__facecard__face--top'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="パス-2" ストローク="#A68385" 変換="translate(10.000000, 7.631510) 回転( -180.000000) 変換(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
<div class='card__facecard__face--btm'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="パス-2" ストローク="#A68385" 変換="translate(10.000000, 7.631510) 回転( -180.000000) 変換(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</本文>
</html>

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn

Web ページの一部の表示と非表示ページの特殊効果の展開と折りたたみ

25 Jul 2016

Web ページの一部の表示と非表示ページの特殊効果の展開と折りたたみ

SVG と CSS3 に基づいたかわいい漫画の動物アニメーションの特殊効果

19 Jan 2017

SVGフィルターとCSS3をベースにした可愛い動物アニメーションの特殊効果です。この特殊効果では、HTML タグと SVG を使用して動物の外観を作成し、CSS3 アニメーションを使用して動物のさまざまなアニメーション効果を作成します。

純粋な CSS_html/css_WEB-ITnose で実装された角の丸い折りたたみメニューの特殊効果コード

24 Jun 2016

純粋な CSS で実装された角の丸い折りたたみメニューの特殊効果コード

CSS を使用してコンテンツパネルを折りたたむ特殊効果を実現するためのヒントと方法

19 Oct 2023

CSS を使用してコンテンツパネルを折りたたむ特殊効果を実現するためのヒントと方法 Web デザインでは、コンテンツパネルを折りたたむことは非常に一般的な特殊効果です。クリックまたはその他の形式のインタラクションを通じて特定のコンテンツを非表示または表示し、より良いユーザーエクスペリエンスを提供します。 CSS を使用してコンテンツパネルを折りたたむ特別な効果を実現するのは、簡単で効果的な方法です。この記事では、この特別な効果を実現するためのいくつかのテクニックと方法を紹介し、具体的なコード例を示します。チェックボックスの:チェックされた疑似クラスの使用チェックボックスの:チェックされた疑似クラスは

具体的功能是：
1.页面上面最多只有一个是显示全部内容的。
2.当自己处于全部显示的时候，点击自己的收起，自己收起。
3.当自己处于全部显示的时候，点击其他的展开是，自己" alt="javascript スキルの展開と折りたたみのより柔軟な js 効果を書きました"> javascript スキルの展開と折りたたみのより柔軟な js 効果を書きました

16 May 2016

展開と折りたたみの効果については誰もがよく知っているはずです。私は空いた時間を使って js で特定の関数を作成しました。完全に表示されているときに、独自の折りたたみ、折りたたみなどをクリックします。興味がある場合は、参照してください。

CSS3 はサイドバーの展開と折りたたみのアニメーションを実装します

12 Jun 2018

この記事では主に CSS3 を使用してサイドバーの展開と折りたたみのアニメーションを実現する方法を紹介し、サンプルコードを添付します。非常に詳細なので、必要な友人にお勧めします。

CSSでメニューナビゲーションバーの折りたたみと展開の効果を実現_ナビゲーションメニュー

16 May 2016

CSS をベースに折りたたんだり展開したりできるツリー状のメニューナビゲーションバー。かなり前に作成されたものなので、あまり美化されていませんが、使いたい場合は自分で美化することができます。

WeChat アプレットはページの折りたたみと展開の効果を実現します

21 Nov 2023

WeChat ミニプログラムは、ページの折りたたみと展開の効果を実現し、軽量のモバイルアプリケーション開発ツールとして、豊富なインターフェイスコンポーネントとシンプルな開発構文を提供し、開発者がミニプログラムアプリケーションを開発しやすくします。この記事では、WeChat アプレットを使用してページの折りたたみと展開の効果を実現する方法を紹介し、参考となる具体的なコード例を示します。 1. 実装のアイデアページの折りたたみと展開の効果を実現するには、ミニプログラムのリストコンポーネントとアニメーション効果を使用する必要があります。具体的な実装アイデアは次のとおりです。 1. ページ内にリストコンポーネントを作成して、折りたたまれたコンテンツを表示します。

jQuery_Layout とレイヤーに基づいてドロップダウンの縮小 (展開と折りたたみ) 特殊効果を実装します。

16 May 2016

jQuery ドロップダウン縮小効果。jQuery プラグインを使用することに慣れていない友人でも、もちろん純粋に使用できます。それを達成するには Js が必要ですが、現在では jquery が非常に人気があるため、学ぶ価値があります。

See all articles