Cube Design 1、8、27のアニメーションとcode解説・Copy も!!!

Design css ：デザイン
Design Cube
記事内に広告が含まれています。

８Cubeと、27Cubeでは、アニメーションの違い(遅延など)が分かる様に、各Cubeに番号を付けています。

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

Codeは、のクリックでクリップボードにCopyできます。

各Cubeの定義には、静止とアニメーション・関連のプロパティ（継続時間、タイミング関数、遅延時間、再生回数、再生方向、アニメーションの状態などの設定）を別途設定する必要から、HTMLとcssの定義を細かく設定しています。

PR広告
PR広告

Base Cube

Base Cube

　上面
左側　
　右側

Base Cube HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jx" data-cube="312">
    <!-- data-cube="312"自体のcss定義はアニメーションが不要な場合不要。但し、class="cube_jx"定義と data-cube=""の連携と、HTML上にdata-cube="312"が無いと側面が透明になる-->
      <div class="cube_jx-wrap">
        <div class="cube_jx-top">
          <div style="color:red;font-weight:900;">Top</div>
          <div></div>
          <!--div class="shadow-flip" data-cube="212">shadow-flipは、アニメーション無しの場合不要。</div-->
          <div></div>
          <!--div class="shadow-y" data-cube="212">shadow-yは、アニメーション無しの場合不要。</div-->
        </div>
        <div>底面</div>
        <!--div class="cube_jx-bottom">.cube_jx-bottom定義はアニメーション無しの場合底面は隠れる為不要。</div-->
        <div class="cube_jx-front-left degY180"><!-- class.degY180が無いと文字の角度つけ及び文字が表示されない。pタグ又は、aタグのclass定義、又はstyle定義でも無効。別途cssで定義 -->
          <div style="color:yellow;font-weight:900;">左側</div>
        </div>
        <div class="cube_jx-front-right degX180"><!-- degX180は、別途cssで定義  -->
          <div style="color:white;font-weight:900;">右側</div>
        </div>
        <div>左奥</div><!--div class="cube_jx-back-left"> .cube_jx-back-left はアニメーション無しの場合、背面左側は隠れてしまう為不要。</div-->
        <div></div><!--div class="cube_jx-back-right">.cube_jx-back-right はアニメーション無しの場合、背面右側は隠れてしまう為不要。</div-->
      </div>
    </div>
  </div>
</div>

Base Cube CSS

css欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。


.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}

.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}

.cube_jx {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}

.cube_jx-top {overflow: hidden;}
.cube_jx-top:before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jx-top:after {
  color: red;      /* HTML上のstyle定義が有効にならないため */
  font-weight:900; /* HTML上のstyle定義が有効にならないため  */
  content: "上面"; /* content: "上面";HTML上の定義が表示されないため必要 */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
}

.cube_jx-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jx-front-left:before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
}

.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

.cube_jx-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jx-front-right:before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
}

.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}

.cube_jx[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
.cube_jx[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}
.cube_jx[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}
.cube_jx[data-cube^="11"], .cube_jx[data-cube^="21"], .cube_jx[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
.cube_jx[data-cube^="12"], .cube_jx[data-cube^="22"], .cube_jx[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}
.cube_jx[data-cube^="13"], .cube_jx[data-cube^="23"], .cube_jx[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}
.cube_jx[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
.cube_jx[data-cube$="3"] {transform: translateZ(calc(-10vmin - 2px));}

[class^=cube_jx-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
[class^=cube_jx-], 
[class^=cube_jx-]:before {
  will-change: transform;
  animation: any 4s infinite both;
}
[class^=cube_jx-]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jx > .cube_jx-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
}
PR広告

Cube Animation

Cube 1：アニメーション

Cubeの静止とアニメーションを表現するために、
Base Cubeと Cube Animationでは、HTMLとcssを変更しています。
もちろん共通して使っているものもあります。
例えば、.cube_jx*と.cube_jy*、8Cubeと27Cubeでは、.cube_jz*
大きくは、animation:やanimation-name:付けたり、付けなかったり(静止状態のCube定義には、animation:やanimation-name:付けない)、
また、各Cubeで関連のプロパティ（例えば、animation-duration, animation-timing-function, animation-delayなど）を別途設定する必要から。
1Cubeの場合、.body_J1を共通で使用。
8Cubeでは、.body_J8を、27Cubeでは、.body_J27を使用し、
.cubeJs は、共通で使用しています。

　Top
Left　
　Right

Cube Animation HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jy" data-cube="312">
      <div class="cube_jy-wrap">
        <div class="cube_jy-top">
          <div style="color:red;font-weight:900;"><div>Top</div></div>
          <div class="shadow-flip" data-cube="312"></div>
          <div class="shadow-y" data-cube="312"></div>
        </div>
        <div class="cube_jy-bottom"></div>
        <div class="cube_jy-front-left degY180">
          <div style="color:yellow;font-weight:900;">Left</div>
        </div>
        <div class="cube_jy-front-right degX180">
          <div style="color:white;font-weight:900;">Right</div>
        </div>
        <div></div><!--div class="cube_jy-back-left"-->
        <div></div><!--div class="cube_jy-back-right"-->
      </div>
    </div>
  </div>
</div>

Cube Animation css

CSS欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}
.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}
.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}
.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

@keyframes shadow_y_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {transform: translateY(-100%) scale(2, 0.75);}
  20%  {transform: scale(2, 1);}
}

@keyframes shadow_y_inverse_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {opacity: 0.9;transform: scale(2, 1);}
  20%  {opacity: 0;transform: translateY(-100%) scale(2, 0.75);}
}

@keyframes shadow_flip_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(90deg);}
  45% {transform: rotate(270deg);}
}

@keyframes shadow_flip_inverse_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(0deg);opacity: 0;}
  45% {transform: rotate(-180deg);opacity: 0.6;}
}

@keyframes shadow_z_animation4s {
  from,
  40%,
  60%,
  80%,
  to { 
    transform: scale(var(--shadow-x-scale), 2); 
  }
  20% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2); 
  }
}

@keyframes shadow_z_inverse_animation4s {
  40%, 
  60% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2); 
  }
  45% { 
    opacity: 0; 
  }
  from, 
  40%, 
  55% { 
    opacity: 0.5; 
  }
  to { 
    opacity: 1; 
  }
  from, 
  20%, 
  80%, 
  to { 
    transform: scale(2); 
  }
}

.cube_jy {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}
/*{表裏反転}*/
.cube_jy > .cube_jy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  will-change: transform;
  animation: animation4s 4s infinite both;
}
/*{表裏反転}*/
@keyframes animation4s  {
  from, 
  to, 
  20%, 
  60% {animation-timing-function: step-start;transform: none;}
  40% {transform: rotateY(-1turn);}
}

.cube_jy[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
/* クラスcube_jyを持ち、data-cube属性が「1」で始まる要素にスタイルを適用する
 [data-cube^="1"]: data-cube属性の値が「1」で始まる要素を選択。例えば、data-cube="123"やdata-cube="1abc"といった属性値が対象。
 top: calc(-10vmin - 2px);
 top: 要素の上からの位置を指定。要素の上部を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
 --color-bgx-top: カスタムプロパティ（CSS変数）として、背景の上部の色を設定。値はrgb(160, 235, 165)。
 --color-bgx-bottom: 背景の下部の色を設定。値はrgb(137, 228, 181)。
 --color-flx-top: 前面の上部の色を設定。値はrgb(78, 188, 151)。
 --color-flx-bottom: 前面の下部の色を設定。値はrgb(67, 178, 119)。	
*/

.cube_jy[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}

.cube_jy[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}

.cube_jy[data-cube^="11"], .cube_jy[data-cube^="21"], .cube_jy[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
/*
  クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素にスタイルを適用
  [data-cube^="11"], [data-cube^="21"], [data-cube^="31"]: data-cube属性の値がそれぞれ「11」、「21」、「31」で始まる要素を選択。
  このセレクターによって、複数の条件に一致する要素に対して同じスタイルを適用。
  left: calc(-10vmin - 2px);
　left: 要素の左からの位置を指定。要素の左側を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
　--color-frx-top: カスタムプロパティ（CSS変数）として、前面の上部の色を設定。値はrgb(45, 95, 59)。
　--color-frx-bottom: 前面の下部の色を設定。値はrgb(45, 99, 57)。
　このCSSは、クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素に対してスタイルを適用：
*/

.cube_jy[data-cube^="12"], .cube_jy[data-cube^="22"], .cube_jy[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}

.cube_jy[data-cube^="13"], .cube_jy[data-cube^="23"], .cube_jy[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}

.cube_jy[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
/*
  クラスcube_jyを持ち、data-cube属性が「2」で終わる要素にスタイルを適用.
  [data-cube$="2"]: data-cube属性の値が「2」で終わる要素を選択
  transform: translateZ(calc(10vmin + 2px));
  transform: 要素に2Dまたは3D変換を適用。
  translateZ(calc(10vmin + 2px)): 要素をZ軸方向（画面の奥行き方向）に移動させる。
  具体的には、10vminに2pxを加えた距離だけZ軸方向に移動。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
*/

.cube_jy[data-cube$="3"] {
  transform: translateZ(calc(-10vmin - 2px));
}

[class^=cube_jy-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
/* cube_jy-で始まるすべての要素に対してスタイルを適用する
　[class^=cube_jy-]: クラス名がcube_jy-で始まるすべての要素を選択。例えば、cube_jy-frontやcube_jy-bottomなどが対象。
　　要素を絶対位置に配置し、親要素の左上隅に位置付け。
　　幅と高さを親要素の100%に設定。背面を表示するように設定。
 */
[class^=cube_jy-], 
[class^=cube_jy-]::before {
  will-change: transform;
  animation: any 4s infinite both;
}

[class^=cube_jy-]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jy-top {
  overflow: hidden;
  animation-name: top_animation;/*アニメーション*/
}
/*{上面の縦方向縮小表示}*/
@keyframes top_animation {
  20% {transform: translateZ(calc(-10vmin + 2vmin));}
  40%, 
  60%, 
  80% {transform: none;}
}
.cube_jy-top::before, 
.cube_jy-top::after {will-change: transform;}

.cube_jy-top::before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jy-top::after {
  color: red;     /* HTML上のstyle定義が有効にならないため */
  font-weight:900;/* HTML上のstyle定義が有効にならないため  */
  content: "Top"; /* content:"上面";HTML上の定義が表示されないため*/
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
  animation: top_flash_animation4S 4s infinite both;
}
/*{Topフラッシュ}*/
@keyframes top_flash_animation4S {
  from, 
  50%, 
  60%, 
  to {opacity: 0;}
  52% {opacity: 0.9;}
}

.cube_jy-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jy-front-left::before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
  will-change: transform;
  animation-name: front_left_animation;
}
/*{前左側縮小表示}*/
@keyframes front_left_animation  {
  20% {transform: scaleX(0.2);}
  40%, 
  60% {transform: translateX(-8vmin) scaleX(0.2);}
  80% {transform: none;}
}

.cube_jy-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jy-front-right::before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
  will-change: transform;
  animation-name: front_right_animation;
}
/*{前右側縮小表示}*/
@keyframes front_right_animation  {
  20% {transform: scaleY(0.2);}
  40%, 
  60% {transform: translateY(8vmin) scaleY(0.2);}
  80% {transform: none;}
}

.cube_jy-bottom {
  transform: translateZ(-10vmin);
  background-image: linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  animation-name: bottom_animation;
}
/*{bottomの表示}*/
@keyframes bottom_animation {
  from, 
  20%, 
  80%, 
  to  {transform: translateZ(calc(-10vmin + 1px)) scale(0.95);}
  40%, 
  60% {transform: translateZ(-2vmin) scale(0.95);}
}

.cube_jy-bottom::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DFF4F0;
  will-change: transform;
  animation: bottom_flash_animation4s 4s infinite both;
}
/*{bottomのフラッシュ}*/
@keyframes bottom_flash_animation4s {
  from, 
  40%, 
  50%, 
  to  {opacity: 0;}
  45% {opacity: 0.9;}
}
/* animation-delay: 248ms; */
.cube_jy[data-cube="312"] > .cube_jy-wrap, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::after, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-], 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after {animation-delay: 248ms;}
.cube_jy[data-cube="312"] > .cube_jy-wrap [class^=shadow-] {animation-delay: 248ms;}
/* 特定の属性とクラスを持つ要素およびその子要素、さらにその擬似要素に対して、
   統一してアニメーション遅延適用。指定された要素のアニメーションが248ミリ秒遅れてから始まる。*/
/*
セレクターの部分
1.cube_jy[data-cube="312"] > .cube_jy-wrap
  classがcube_jyで、data-cube属性が312の要素の直下にある、.cube_jy-wrapの要素を選択。
2.cube_jy[data-cube="312"] > .cube_jy-wrap::before
  上記の要素の:::before擬似要素を選択。
3.cube_jy[data-cube="312"] > .cube_jy-wrap::after
  上記の要素の:::after擬似要素を選択。
4.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]
  上記の要素の子要素で、.cube_jy-で始まるすべての要素を選択。
5.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before
  その中の:::before擬似要素を選択。
6.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after
  その中の:::after擬似要素を選択。
*/

8 Cube’s

Cubeの色を変更して、左右と後ろ、下にCubeを配置しました。
Cubeのアニメーション遅延のタイミングは、それぞれ異なります。
中心(312と311)が、animation-delay: 248ms;、他は、321が107ms;、322が142ms;、211が167ms;、212が120ms;、222が25ms;です。

8 Cube’s

211 left
311 left
311 right
321 right
212 Top
212 left
222 Top
222 left
222
312 Top
312 left
312 right
322 Top
322 left
322 right
223 cube-front-left
233 cube-front-left

27 Cube’s

さらに、周りにCubeを配置して合計27Cubeです。
Cubeのアニメーション遅延のタイミングは、更に異なります。
Cubeの凹み具合でわかると思います。
右上の✅のクリックで、Gubeの大きな影の表現が変わります。

27 Cube’s

111 left
211 left
311 left
311 right
321 right
331 right
112 Top
112 left
122 Top
122 left
132 Top
132 left
212 Top
212 left
222 Top
222 left
222
232 Top
232 left
312 Top
312 left
312 right
322 Top
322 left
322 right
332 Top
332 left
332 right
113 left
213 left
223 cube-front-left
313 left
313 right
323 right
333 right

.gif画像とanimation.txtの合成

アニメ.gif画像とアニメ.txtを合成しました。
アニメ.gif画像は、完成前の27Cube表示を、.mp4化後に.gif化したものです。

Cube

HTML

<div class="body-x tac">
<span class="text_background ta_c" style="font-size:200px;font-weight:bolder;">Cube</span>
</div>

css

.body-x {
  width: 900px; /* width:100%; */
  height: 800px; /* hight:100%;  height: 100vh; */
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://xn--ecka7j.biz/wp-content/uploads/2025/02/A1_w900-h800-5.64mb.gif");
 /*background-size:cover; 画像のサイズを指定、必要に応じて変更 */
 /*background-size:auto;  画像のサイズを実際のサイズにする */
  background-repeat: no-repeat; /* 繰り返しの有無を指定 */
  background-position: center center; /* 画像の位置を指定 */
}

.text_background {
    width:      100%;
    color: transparent;
    -webkit-background-clip: text;
    background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : rainbow_10s 10s linear infinite; }
@keyframes  rainbow_10s {
        0% { background-position: 0 0 }
    100% { background-position: 600px 0px } }
/* -webkit-が無いと、虹色グラデーションのみになる 2022/01/10 */

正当なCSSです!

PR広告
GEEKOM
タイトルとURLをコピーしました