デザイン：動きのあるカードデザイン＆ Link（Button/Card）

css ：デザイン

Design Moving Menu

2023.11.252023.11.26

記事内に広告が含まれています。

この様なCard Designは、如何でしょうか？

Thank you for reading this post, don't forget to subscribe!

各場所に配置しているアニメーションCardは、実サイトでは（クリックできます。ボタンを配置している部分も、カーソルを、Cardまたは、Buttonに持ってくると、背景やボタンの色が変化します。ボタン部分では更に動きが出る様に指定しています。（ボタンがある部分は、Design、Glass Morphism DesignとTop Pageです。アイキャッチ画像は、アニメーションですが、（実表示）部分は、背景に、HTMLとcssでCardを配置し、Card内に更にファイルを置き）実現しています。

PR広告

実表示イメージ
- 変更前Design
- .html

実表示イメージ

アイキャッチ画像の背景をグラデーションで定義
(HTMLはそのままで、cssのみ変更)
※．ここでは、Designに受点を置き、実際の動作を制限しアニメーションのみの表示と変更しました。（実際のCodeは、以下.htmlを参照）

変更前Design

変更前のデザインはこんなものでした

.html

HTML記述はこれだけです。

※.画面低用量化に伴い、アニメーションgifは、.webm又は.mp4に変更済
　ここでの、<imgタグは、便宜的に-gifとし、コメントアウト<!– imgとする。

<div class="container_j3">
<div class="side left-side">
  <div class="card">
  <a href="https://xn--ecka7j.biz/site-operation/design/7939/" target="_blank">
  <button class="button">Design</button>
  </a>
  <label>Design</label>
  <a href="https://xn--ecka7j.biz/site-operation/design/7939/" target="_blank">
  <!-- img src="https://xn--ecka7j.biz/wp-content/uploads/2023/08/css3dnｰgif" style="padding-left:27px" /-->
  </a>
  </div>
  <div class="row">➡ 
  <div class="card small">
  <button class="button"></button>    	
  <label>Plugin</label>
  <a href="https://xn--ecka7j.biz/site-operation/908/" target="_blank">
  <!-- img src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/wpPlugin-gif" /-->Plugin
　</a>
  </div>
  <div class="card small">
  <button class="button"></button>       	
  <label><br>Security</label>
  <a href="https://xn--ecka7j.biz/security/1242/" target="_blank">
  <!-- img src="https://xn--ecka7j.biz/wp-content/uploads/2022/09/WordPress-768-432_18.1mb-gif" /-->Security
  </a>
  </div>  
</div>
</div>
<div class="side center-side">
  <div class="card">
  <a href="https://xn--ecka7j.biz/site-operation/design/5452/" target="_blank">
  <button class="button">Glass Morphism Design</button>
  </a>
  <label><br>GlassMorphism</label>
  <a href="https://xn--ecka7j.biz/site-operation/design/5452/" target="_blank">
  <!-- img src="https://xn--ecka7j.biz/wp-content/uploads/2023/07/Glass-7-gif" /-->
    GlassMorphism
  </a>
  <br>各所に配置しているCardは、クリックできます。
  </div>
</div>
<div class="side right-side">
  <div class="card">
  <a href="https://xn--ecka7j.biz/" target="_blank">
  <button class="button">Top Page</button>
  </a>
  <label><br>Top</label>
  <a href="https://xn--ecka7j.biz/" target="_blank">
  <!-- img src="https://xn--ecka7j.biz/wp-content/uploads/2023/01/web_10.9MB-gif" /-->
  </a>
  </div>
</div>
</div>