投稿記事の文字や画像にCSSのみで影や動き、アニメーション等で装飾

以前から簡単な方法でフロントページ、投稿記事に装飾して楽しんでいたが、最近クラッシックエディターからブロックエディターに移行したので新たな気持ちで「CSSのみで装飾」に挑戦してみた。

① タイトル、見出し、文書内の文字に影で協調

　1．フロントページをオープンするとサイト・タイトルがフェードイン。

.site-branding-text {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}

　2．投稿記事の見出し、協調する文字に影（text-shadow）を追加する。

o{text-shadow: 1px 2px 3px #808080;}
＊(a),(p)等のアルファベットは避けること

② 文書枠のサンプルを得る。

　1．文書枠に関しては、サンプルを紹介してるサイトから好みの枠を選んでカスタマイズした。　「さるわか」さんのホームページ　感謝！

ピックアップ例：12. 分厚いボード風
    <div class="box12">
        <p>ここに文章</p>
</div>
.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5989cf;　←#f0f8ff;に変更
    background: #c6e4ff;　←none;に変更
    border-bottom: solid 6px #aac5de;
    border-radius: 5px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}

　2．ピックアップしたサンプルがマウスオーバー時に浮き上がる。

.float{ position:relative;
    top:0;
    padding:10px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    outline: none;
    transition: all .5s;}  /*アニメーションの設定*/
.float:hover {    /*hoverをしたらボックスに影がつき浮き上がる*/
    top:-4px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);}

③ 装飾した文字や画像にアニメーションで協調

取り合えず最低でも各種プロパティーがどのような動作するのかだけでも知る必要がありそのサンプルなどをサイトから得る。
参考にした多くは　「WEB MANABU」さんの「応用69.要素の移動、回転、変形（transform）」からカスタマイズした。感謝！

　1．サムネイル画像を影を付けて回転させる。

＜HTML＞
    <div class="clip-path-shadow rotate-x"> /*--x軸（縦）回転--*/
    <div class="rotate-y div"> /*--画像の情報と動作--*/
    </div></div>
   *動きが無い場合は影と回転を<div>で囲む
＜CSS＞
/*--X軸(縦）回転--*/
.rotation-x1,
.rotation-x2{
    width: 150px;
    height: 150px;
}
.rotation-x2{
    transform-style: preserve-3d;
    perspective: 150px;
}
.rotation-x1 div,
.rotation-x2 div{
    transition: transform 2s;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background-color: #ddd;
    text-align: center;
}
.rotation-x1 div:hover,
.rotation-x2 div:hover{
    transform: rotateX(2turn);
}

　2．ボーダーラインをアニメーションさせる。

<span class="border"> /*中央から外へ広がる線--*/ </span>
.border{
	position: relative;
	text-align: center;
	font-size: 12px;
}
.border:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #00b900;
	transform: translateX(-50%);
	animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
	0%{width: 0%;}
      100%{width: 100%;}
}

　3．マウスオーバー時に文字を拡大させる。

<span class="kakudai">拡大する文字</span>
.kakudai{
    display  : inline-block;
    animation: kakudaiAnime 4s alternate infinite; /* アニメーション指定 */
    animation-play-state: paused;
}
.kakudai:hover {        
    animation-play-state: running;
    }
@keyframes kakudaiAnime{
   0% { transform: scale(1, 1);   }    /* 大きさ */
  50% { transform: scale(2, 1.5); }    /* 大きさ */
}

多くのサンプルがネットに溢れてるのでそのまま利用できるものがあるけど、少し手を入れることで好みの影とか動き（アニメーション）に変える事ができる。