どうも！LSSです！！
サンプル
こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！
…が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ
コード
<style><!--
@keyframes katakata{
0%{transform:rotate(-10deg);}
80%{transform:rotate(-10deg);}
85%{transform:rotate(10deg);}
90%{transform:rotate(-10deg);}
95%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
}
.midashi{
display:inline-block;
position:relative;
border-radius:15px;
border:10px double greenyellow;
padding:15px;
}
.midashi:before{
display:inline-block;
content:"ここに注目！";
position:absolute;
top:-20px;
left:-20px;
background-color:yellowgreen;
padding:3px;
font-weight:bold;
color:white;
animation:katakata 5s linear 0s infinite normal;
}
.midashi:hover:before{
background-image:linear-gradient(transparent 60%,pink 80%,transparent 100%);
}
--></style>
<div class="midashi">
<p> こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！</p>
<p>…が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ</p>
</div>
コード解説
アニメーションの内容となる部分
@keyframes katakata{
0%{transform:rotate(-10deg);}
80%{transform:rotate(-10deg);}
85%{transform:rotate(10deg);}
90%{transform:rotate(-10deg);}
95%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
}
「普段とまっていて、たまにカタカタ揺れる」という動きを指定している部分になります。
最初は、
transform:rotate(-10deg);
によって「左に10度、傾いた状態」から始まり、アニメーション再生に指定した時間の「80%が経過した時点から85%経過するまでの間」は、
80%{transform:rotate(-10deg);}
85%{transform:rotate(10deg);}
によって「左に10度、傾いた状態」から「右に10度、傾いた状態」に変化します。
あとは同様に、
85%{transform:rotate(10deg);}
90%{transform:rotate(-10deg);}
95%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
と、左右交互に傾きが変化しつつ、最終的に（100%経過した段階では）元の「左に10度、傾いた状態」で１周分のアニメが終了します。
参考過去記事：CSSでkeyframesのanimationをやってみた！
ボックスを装飾している部分
.midashi{
display:inline-block;
position:relative;
border-radius:15px;
border:10px double greenyellow;
padding:15px;
}
ボックス全体の囲みを装飾している部分になります。
border-radius:15px;
で「15ピクセルのサイズで角を丸めて」、
border:10px double greenyellow;
で「枠線は 10ピクセル幅の二重線（double）、黄緑色（greenyellow）」としています。
padding:15px;
は、ボックスの中に15ピクセルの余白を設けています。
参考過去記事：【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集
見出し部分
.midashi:before{
display:inline-block;
content:"ここに注目！";
position:absolute;
top:-20px;
left:-20px;
background-color:yellowgreen;
padding:3px;
font-weight:bold;
color:white;
animation:katakata 5s linear 0s infinite normal;
}
見出し部分に当たる文字を指定しているのが、
content:"ここに注目！";
のところ。
この中の文字は好きに変更して構いません。
が、文字数が増えるとすぐに２行になってしまったりするので、文字数はこのぐらいがいいと思います。
animation:katakata 5s linear 0s infinite normal;
で「アニメーションの内容となる部分」で指定した
「katakata という動きを、5秒かけて再生。再生速度は緩急なし（linear）で、アニメ開始までの待ち時間は0秒。無限（infinite）に繰り返し、再生方向は普通（normal）」
と指定しています。
マウスカーソルが乗った時の変化
.midashi:hover:before{
background-image:linear-gradient(transparent 60%,pink 80%,transparent 100%);
}
ここで、マウスカーソルが乗った時（:hover）に「見出し部分（’.midashi:before）」 に対して、
background-image:linear-gradient(transparent 60%,pink 80%,transparent 100%);
というピンク色のマーカーが乗るようにしています。
参考過去記事：直線グラデーションもやってみたら、よく見るCSSマーカーに行きついた話
ボックス内の文章
<div class="midashi">
<p> こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！</p>
<p>…が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ</p>
</div>
この赤文字の部分を好きな文章に変更して使う事ができます。
要は、
<div class="midashi">
と、
</div>
で囲んであればなんでもOKです^^
アレンジしやすいポイントをまとめると
<style><!--
@keyframes katakata{
0%{transform:rotate(-10deg);}
80%{transform:rotate(-10deg);}
85%{transform:rotate(10deg);}
90%{transform:rotate(-10deg);}
95%{transform:rotate(10deg);}
100%{transform:rotate(-10deg);}
}
.midashi{
display:inline-block;
position:relative;
border-radius:15px;
border:10px double greenyellow;
padding:15px;
}
.midashi:before{
display:inline-block;
content:"ここに注目！";
position:absolute;
top:-20px;
left:-20px;
background-color:yellowgreen;
padding:3px;
font-weight:bold;
color:white;
animation:katakata 5s linear 0s infinite normal;
}
.midashi:hover:before{
background-image:linear-gradient(transparent 60%,pink 80%,transparent 100%);
}
--></style>
<div class="midashi">
<p> こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！</p>
<p>…が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますｗ</p>
</div>
赤文字で示した部分を変更する事で、色や文言を自由にアレンジできます^^
使ってみたい方はご自由にコピペ・改変してご利用ください。
赤文字以外の部分も手を加えると、より素敵になるかも！？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
