丸っこい形がアニメーション・をHTMLとCSSで実現

1 丸っこい形がアニメーションするmarukkoianime.PNG

三色の丸っこい形が時間をずらして無限に回転して、各丸っこい形の中に簡単なテキストを入れてみます。

実は、これはネットのCSSの紹介のHPで見たのですが、ソースをコピーして使ってみたところ、記事以外の部分を含めて画面全体がぐちゃぐちゃになって全く使えませんでした。
久しぶりにそのソースを見て、発想はネットからのそのものですが、何とか使えるようにならないかと、ソースは大幅に書き変えてみました。

このブログを書きながら、何度もソースを書き変えて私の画面ではうまく動作していますので紹介します。
今回初めて使うものなので、1度も実用的に使ったことはありません。
で、その成果ですが・・・

こんな感じですね。
下にソースを表示しますので、もし気に入ったなら、使ってみてください。

abc
こんにちわ!
def
暑いね!
ghi
寒いね!

HTMLは、
<div class="circle-w1">abc<br><span style="font-size:large;">こんにちわ!</span></div><div class="circle-w2">def<br><span style="font-size:large;">暑いね!</span></div><div class="circle-w3">ghi<br><span style="font-size:large;">寒いね!</span></div>
と書かれています。
3つの形にはそれぞれ「circle-w1」、「circle-w2」、「circle-w3」という任意の名前を付けてあります。



2 1つだけ表示
3つ同時じゃなくても、名前を指定すると1つだけでも表示できます。
上で右端にあった丸っこい形を1つだけを左側に表示してみます。
ghi
寒いね!

HTMLは、
<div class="circle-w3">ghi<br><span style="font-size:large;">寒いね!</span></div>
と書かれています。


3 中央に表示
中央に2つ表示してみます。

ghi
寒いね!

abc
こんにちわ!


HTMLは、
<div align="center">中央に2つ表示してみます。<br><p class="circle-w2" >ghi<br>寒いね!</p></div>
と書かれています。



4 ソース
注意事項: HTML部分のソースは上で紹介しましたが、ソースを表示させるために、タグの左側の「<」は大文字になっています。実際に使用する際は小文字にしてください。
また、 /* 〇〇 */の部分は注釈なので、削除してもOKです。(そのまま残しておいても大丈夫です。)

CSS部分のソースは以下の様になっています。
※参考: 以下の①、②、・・・などの太文字部分は、色々数値などを変えて様々に変化させるといいと思います。変えた場合は、同時に①のスタイル名も変えると両方残せます。

<style>  /* ここから下がスタイルの中身の記述部分 *
/* 丸っこい形のスタイル部分、3つに分かれています */


/* 丸こっい形_w1のスタイル部分 */
.circle-w1 {   /* ①スタイル名 */
background: #ffc1e0;  /* ②色 */
border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;  /* 丸っこい形の丸っこさの定義、「/」の左側は水平方向で右側は垂直方向 */
animation: border-animationw 9s infinite linear;  /* ③9秒で1周を一定の速さで無限にさせる、下で定義した「border-animation」を指定 */
display: inline-block; /* 横並び・かつ円の幅と高さが指定可にする */
width: 160px;   /* ④幅 */
height: 160px;   /* ⑤高さ */
mix-blend-mode: multiply;   /* 重なったときの色 */
text-align: center;   /* 文字の位置を中央に */
color: #ffffff;   /* ⑥文字色は白 */
padding:30px;   /* 余白は30ピクセル */
top: 130px;   /* ⑦上から130ピクセルに表示 */
left: 25%;   /* 左から25%に表示 */
z-index: 1;   /* 重なり順、値が大きいほど前面  */
}


 /* 丸こっい形_w2のスタイル部分 */
.circle-w2 {   /* 以下、同趣旨につき詳細は、中略 */
background: #eddbff;
border-radius: 80% 30% 40% 50%/50%; animation: border-animationw 7s infinite linear; display: inline-block; width: 160px; height: 160px; mix-blend-mode: multiply; text-align: center; top: 130px; left: 25%; z-index: 3; color: #000000; padding:30px; }


/* 丸こっい形_w3のスタイ部分 */
.circle-w3 {  /* 以下、同趣旨につき詳細は、中略 */
background: #c993ff; 
border-radius: 40% 40% 50% 40%/30% 50% 50% 60%; animation: border-animationw 8s infinite linear; display: inline-block; width: 160px; height: 160px; mix-blend-mode: multiply; text-align: center; top: 130px; left: 25%; z-index: 2; color: #ffffff; padding:30px; }

/* アニメーションのスタイル部分 */
@keyframes border-animationw {  /* アニメーションさせる、名前は「border-animationw」 */
to { transform: rotate(360deg); }  /* 360度回転 */
} </style>
※実際は、この下に<style>~</style>のCSS部分が書かれていますが、画面には表示されません。

ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 0

この記事へのコメント

  • tor

    こんばんは。
    だんだんと高度になっていくような・・・
    私も皆さんのように
    ブログに凝ってみたいのですが
    今はとりあえず一歩ずつと思っています。
    今夜はPCがいきなりロックしてしまい
    アセアセでした。
    久しぶりのトラブルでした。
    2019年09月14日 20:27
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    「今夜はPCがいきなりロック」はあせりますね。何しろ本日の電車・バス乗り放題の記事が書けないと困りますもんね。
    ところで、ロックとはどのような状態なのか?ネットで調べると、パスワードを設定して第3者が勝手にPCをいじらないようにする、とありましたが、これよく解除できましたね。
    実は私の方は、昨日インターネットにつながらない(Wi-Fiを認識しない)状態になり、8月28日から3回目の経験です。Windows10のアップデートがあると必ずこの状態になり、何しろネット情報が検索できないので、思い当たること全て手あたり次第試してみてよく分からないけど接続できた、前回やった手順のメモが役に立たない、つまり同じ方法でも解決しない、そこで初めてマイクロソフトのサポートに電話して、とりあえずの解決策を教えていただきました。
    ネットには書かれていませんが同様な問い合わせが多いらしく、マイクロソフト社の方で情報を得るために、相手側から私のパソコンを遠隔操作して色々な情報を持って行ったようです。
    根本的な解決策が出来ることを願って、遠隔操作されることに協力しました。
    NEC製の特定の機種では、アップデート以外にも再起動するとインターネットを認識しない状態になるそうです。
    初めてマイクロソフトに電話したのですが、非常に対応は良かったです、以前アップル社にも問い合わせしたことがありますがここも対応が良かったです。ここでも遠隔操作で実際に画面を操作して丁寧に教えてくれました。どちらも男性の方でした。
    他社のサポートは女性の方がほとんどですが、非常に知識がなくレベルが低く、マニュアル通りの話しか出来ずその結果が対応の悪さに出てきます。
    そんな印象を感じました。
    さて、ブログのHTMLやCSSの話ですが、これは私の忘備録でもあります。
    私も覚えているわけではないので、ブログに書くことで実際に動作を確かめながら、うまく出来るようになったら記録として残しているみたいです。
    いくら本を読んでも、ノートに書いてあっても、わかったつもりでも、実際にブログで再現してみないことには、確認しようがありません。
    そして、動作することが確認できても、ブログで公開する以上は、やたらなことはかけないので、さらにもう少しよく調べてみようという気になります。
    本やノートやデジタル情報での理解だと「いい加減」のままで止まってしまいます。
    ブログ公開のお陰で、「いい加減状態」から一歩前進できる気がします。
    本当は、皆様のことを考えると、もう一歩前の基本的な情報の方が喜ばれるのかもしれません。そういったことも、今後は取り上げてみたいと思います。本や講義には順序がありますが、幸いなことにブログには順序を無視できる特権があります。それを活用したいと思います。
    リニューアル以前は、こんなに長いコメントは分割しないと書けませんでしたが、今回はどうでしょうか?
    2019年09月14日 22:42
  • ポジティブオーラ

    ブログで色々なことが出来るのですね!
    ただただ驚いています!
    2019年09月15日 07:18
  • わけい

    ポジティブオーラさんへ
    そうですねぇ~、実は私自身も驚いています。
    でも考えてみると、ホームページはそう簡単には作れませんが、誰でも簡単に使えるようにしたのがブログ。その違いは、難しい部分のレイアウトやデザインなどは事前に用意された既成のものを使うことで、本文だけを書けばよいようにしたのがブログ、既成の部分が用意されていないのがホームページ。
    だから、既成の部分までブログで作るとホームページとほぼ同じようなことが出来るということになるようです。
    ブログの既成の部分は、あらかじめ複数のデザインが用意されていますが、それは全てデザインの仕様を書いてあるCSSに書かれているので、ここを書き変えると、既製服が(部分的ではありますが)私服っぽく出来るということだと思います。
    別の表現をすれば、基本的な仕様で作られている既製服にCSSを利用してワンポイントでアクセサリーやちょこっと作り替えた既製服にする。という感じでしょうか。
    色々なホームページで工夫してやられていることは、実はブログでも表現できるはずです。
    2019年09月15日 07:52
  • てくてく

    色々な事ができるんですね。
    内容、だんだん、高度になってきますね。
    わけいさん、ITのエンジニアさんみたいですね。
    2019年09月15日 22:13
  • わけい

    てくてくさんへ
    コメントどうもありがとうございます。
    今度はもっと実際に使って役に立つ基本的なことに触れようと思います。
    これは今まで、画面が壊れて手に負えなかったものが、何とかなったので忘備録的にここに残しておきました。
    2019年09月15日 22:50
  • すーちん

    おはようございます
    実用的にどういうところで
    つかえるんですか?
    2019年09月16日 09:01
  • わけい

    すーちんさんへ
    コメントどうもありがとうございます。
    「実用的には」ですが、この記事の冒頭にも「1度も実用的に使ったことはありません。」と書いておきましたが、動かない形なら2019年08月23日の記事「リニューアル後の使い方の方法一覧」https://waccii.at.webry.info/201907/article_7.htmlでワンポイントとして使っています。(色と形も少し変えてあります。)
    どんなところにどのように使うかは、各人の工夫だと思います。そもそも頻繁に実用的に使う手法ではないので、一律に同じ使い方をしてもつまらない気がします。
    こんな動く形をブログでも使える、ということを知っていただくだけでも十分だと思います。
    2019年09月16日 09:42
  • ポン子

    わぁ、面白い!
    スマホからでも、クルクルと回るのが見られました
    CSS編集、ずっと尻込みをしていましたが、挑戦してみようかしら、と思えました
    だって楽しそうじゃないですか
    ブログサービスをやめてしまう話があちこちで出ている中で、せっかく残っているこの遊び場、前とは違うのは残念だけれど新しい楽しみ方もまだまだありそう
    面白い機能のご紹介ありがとうございました
    2019年09月16日 15:29
  • フラバーバ

    ブログでいろんなことが出来るのですね。
    面白いな~と思っても 冒険する勇気がないです。
    わけいさんの 記事から いろんな知識を吸収したくても
    チンプンカンプンですが へぇ~ こんなことが出来るのだ、、、と
    知ることが出来て 楽しく読ませていただいています。
    2019年09月16日 21:10
  • わけい

    ポン子さんへ
    コメントどうもありがとうございます。
    おそらくスマホだと横画面にしないと、PCのようには表示されないと思いますが、とにかくポン子さんのスマホで見られて良かったです。
    それに、ポン子さんのように「楽しそう」といってくれた方はいなかったので、本当に挑戦するかどうかは別にしても、そう言っていただけるだけでもうれしいです。
    もし、再現出来たらぜひその時は連絡を!
    2019年09月16日 22:44
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。
    実際に冒険しなくても、面白いって思っていただければそれで十分です。
    ブログでは「いじれない」部分がありますので、ホームページのように自由には出来ないのですが、それでも結構色々なことが出来るってことが、私自身も実感できました。
    ブログは大まかには「①ヘッド部分+②ボディ部分」と③別ファイルのCSSから成り立っているのですが、普段ブログ記事を書いているのは②の「ボディ部分」だけに書き込んでいます。
    普通は①と③はいじらないです。
    今回の記事で紹介したのは、②に書いて実現させています。
    2019年09月16日 22:55