Bloggerデザイン : ネオングラデーション回転

1. デザインのタイプ

【Neon Rotating Profile Card / ネオン回転アニメーション】
円形のフレームを鮮やかなネオンのグラデーションが回転し続ける、近未来的なプロフィールカードです。ホバーによって画像から詳細情報へと滑らかに切り替わります。

matsu_U
LOVE TPD

About me

2. デザインの特徴

• 無限回転ネオンボーダー
  @keyframes animate による360度回転と、グラデーションを組み合わせた美しい外周エフェクトを搭載しています。
• スムーズなフェードアウト切替
  マウスを乗せると画像が透過し、内側から名前やSNSリンク、アクションボタンが浮かび上がる直感的な構造です。
• インタラクティブ・ボタン
  最下部のボタンは letter-spacing を利用したホバーアニメーションを採用しており、細部までこだわり抜いた設計です。

3. 紹介コード

このデザインは単体でのインパクトが非常に強いため、サイドバーのプロフィールや、特設ページの紹介セクションに最適です。

<div class="vol6-wrapper">
  <div class="vol6-box">
    <div class="vol6-content">
      <img src="画像URL">
      <h2>NAME<br><span>肩書</span></h2>
      <a href="#">About me</a>
    </div>
  </div>
</div>

<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/* ブログ記事内での干渉を防ぐためのラッパー */
.vol6-wrapper {
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f1846; /* 背景色 */
  padding: 40px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
}

.vol6-box {
  position: relative;
  width: 350px; /* 少しサイズ調整 */
  height: 350px;
  border-radius: 50%;
  overflow: hidden;
}

.vol6-box::before {
  content: '';
  position: absolute;
  inset: -10px 120px;
  background: linear-gradient(315deg,#dd0b8c,#0a83ec);
  transition: 0.4s;
  animation: vol6-animate 3s linear infinite;
}

.vol6-box:hover::before {
  inset: -20px 0px;
}

@keyframes vol6-animate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vol6-box::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: #0f1846;
  border-radius: 50%;
  z-index: 1;
}

.vol6-content {
  position: absolute;
  inset: 25px;
  border: 3px solid #0a83ec;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.vol6-content img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
  pointer-events: none;
  z-index: 3;
}

.vol6-box:hover .vol6-content img {
  opacity: 0;
}

.vol6-content h2 {
  position: relative;
  font-size: 1.5em;
  text-align: center;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 !important;
  line-height: 1.2;
}

.vol6-content h2 span {
  font-weight: 300;
  font-size: 0.75em;
}

.vol6-content a {
  position: relative;
  margin-top: 15px;
  padding: 8px 18px;
  background: #fff;
  color: #0f1846 !important;
  border-radius: 25px;
  font-weight: 500;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.4s;
}

.vol6-content a:hover {
  letter-spacing: 0.2em;
  background: #0a83ec;
  color: #fff !important;
}
</style>