3つの重なった円をゆっくり回転させる

やっと3つの円と文字が重なった
これは、しばらく前(2019/09/22)に手掛けたのですが、3つの円が重ならず、しかも文字はとんでもないところに表示されました。
そればかりでなく、記事以外の部分と重なって表示され、しばらくそのままになっていました。

下書き記事がかなり溜まってしまいました。
そのうちの1つにチャレンジし、ソースを見直し、何とか表示されるようになりました。


Principia
phirosophiae



重なった円が回転は

3つの重なった円がゆっくり回転します。
色と回転時間は、
下側のpalegreenが19秒、中間のlightskyblueが13秒、上側のaquaが9秒
で1回転し、無限に繰り返す設定です。
その上に、固定した文字を配置しています。


circle_water_blue_l.png


ソースは
※ソースの各タグの左側の「<」は全角になっていますが、実際に使用する際は半角にしてください。
各ソースの右側部分にコメントを書いていますので、その分長めに見えるかも知れません。
<HTMLのソース>
<body>
<div class="relative"> ブロックのclass名relativeのスタイル実施
<p class="absolute wp">Principia phirosophiae</p> 段落のclass名absolute,wpのスタイル実施、テキスト表示
<div class="absolute wd circle-1c"></div> 各class名absolute,wd,circle-1cのスタイル実施
<div class="absolute wd circle-2c"></div> 各class名absolute,wd,circle-2cのスタイル実施
<div class="absolute wd circle-3c"></div> 各class名absolute,wd,circle-3cのスタイル実施
</body>

いたってシンプルです。
段落やブロックはclass名のスタイルを実施しているだけです。
あとちょこっと段落にテキスト表示があります。

<CSSのソース>
CSSの方はHTMLに比べ、少し長いですね。
<style>  以下はCSSの内容
/* Positioning */  <位置関係>
body { body要素の部分
padding: 48px; 内側余白設定
position: relative; 位置指定・相対
background: #ffd;  背景色
}
.relative {  class名relativeのスタイル
position:relative;
}
.absolute {  class名absoluteのスタイル
position:absolute;
}
p.wp {  段落要素のclass名wpのスタイル
font: 40px/1.2 ; フォント指定
color: #fff;  色
text-align: center;  中央ぞろえ
top:80px;  上からの位置
left:20px;  左からの位置
z-index: 1;  重なりは1番上に表示
}
div.wd {  ブロック要素のclass名wdのスタイル
width: 280px; 幅
height: 300px; 高さ
mix-blend-mode: multiply;  重なったときの状態
}
/* Circles */  <円関係>
.circle-1c {  class名circle-1cのスタイル
background: palegreen;  背景色palegreen
border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;  円の形状設定
animation: border-animation 19s infinite linear;  border-animationの回転時間19秒 無限繰返し 一定
}
.circle-2c {  class名circle-2cのスタイル
background: lightskyblue; 背景色lightskyblue
border-radius: 80% 30% 50% 40%/50%;
animation: border-animation 13s infinite ease-in; border-animationの回転期間13秒 無限繰返し 開始ゆっくり
}
.circle-3c {  class名circle-3cのスタイル
background: aqua; 背景色aqua
border-radius: 40% 40% 50% 40%/30% 50% 50% 30%;
animation: border-animation 9s infinite ease; border-animationの回転時間9秒 無限繰返し 開始完了滑らか
}
/* Animation */  <アニメーション関係>
@keyframes border-animation {  keyframes規則・アニメーション名・border-animation
to { transform: rotate(360deg); } 終了時点設定・360度回転
}
</style>

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 27

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた

この記事へのコメント