以前作成して没になった案で、恐らく今後も使いどころがあまりないと思うのですが、せっかく作ったので簡単な記事にしたいと思います。
なお、目をまわしやすい方は4つ目の例をあまりじっくり見ない方が良いかもしれません。作った本人が乗り物酔いに似た嫌なものを感じていますので…。
表示が重いので、スマホで閲覧するときれいに見えない可能性が高いです。
実現したいこと
実現したいことは以下のとおり。
- CSSのみでアニメーション
- ちょっと変わったアニメーション
ということで、アレを使えばああなるのではと試しました。
見出し編と書いていますが、見出しに限定している訳ではなく、見出しのように横長になる要素用という程度の意味です。
CSSで要素の四隅をうねらせる
対応しているブラウザでご覧の場合は、以下で実際の動作をご覧頂けます。
CSSで要素の四隅をうねらせた見出し 1
<h3 class="wavy-line-v1">CSSで要素の四隅をうねらせた見出し 1</h3>
.wavy-line-v1 {
padding: .5em;
-webkit-animation: wl1 4s infinite linear;
animation: wl1 4s infinite linear;
border-width: 9px;
border-style: double;
border-color: #fff;
background-color: #90e0d6;
box-shadow: 0 0 0 5px #90e0d6;
}
@-webkit-keyframes wl1 {
0% {
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
@keyframes wl1 {
0% {
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
少し左右がうねりますが、分かりやすいようにborderを入れています。
CSSで要素の四隅をうねらせた見出し 2
<h3 class="wavy-line-v2">CSSで要素の四隅をうねらせた見出し 2</h3>
.wavy-line-v2 {
padding: 1em;
-webkit-animation: wl2 4s infinite linear;
animation: wl2 4s infinite linear;
background-color: #90e0d6;
}
@-webkit-keyframes wl2 {
0% {
border-radius: 30px 70px 70px 70px/30% 40% 60% 60%;
}
25% {
border-radius: 70px 70px 30px 70px/40% 60% 30% 60%;
}
50% {
border-radius: 120px 70px 70px 120px/50% 60% 40% 50%;
}
75% {
border-radius: 70px 100px 100px 70px/60% 50% 50% 40%;
}
100% {
border-radius: 30px 70px 70px 70px/30% 40% 60% 60%;
}
}
@keyframes wl2 {
0% {
border-radius: 30px 70px 70px 70px/30% 40% 60% 60%;
}
25% {
border-radius: 70px 70px 30px 70px/40% 60% 30% 60%;
}
50% {
border-radius: 120px 70px 70px 120px/50% 60% 40% 50%;
}
75% {
border-radius: 70px 100px 100px 70px/60% 50% 50% 40%;
}
100% {
border-radius: 30px 70px 70px 70px/30% 40% 60% 60%;
}
}
borderなしの場合。
CSSで要素の四隅をうねらせた見出し 3
<h3 class="wavy-line-v3">CSSで要素の四隅をうねらせた見出し 3</h3>
.wavy-line-v3 {
padding: .5em;
-webkit-animation: wl3 4s infinite linear;
animation: wl3 4s infinite linear;
border-width: 9px;
border-style: double;
border-color: #fff;
background-color: #90e0d6;
box-shadow: 0 0 0 5px #90e0d6;
}
@-webkit-keyframes wl3 {
0% {
border-top-style: double;
border-top-color: #fff;
border-right-width: 6px;
border-bottom-style: double;
border-bottom-color: #fff;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-top-style: solid;
border-top-color: #fff;
border-right-width: 9px;
border-bottom-style: solid;
border-bottom-color: transparent;
border-left-width: 3px;
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-top-style: double;
border-top-color: transparent;
border-right-width: 2px;
border-bottom-style: double;
border-bottom-color: transparent;
border-left-width: 2px;
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-top-style: solid;
border-top-color: transparent;
border-right-width: 3px;
border-bottom-style: solid;
border-bottom-color: #fff;
border-left-width: 9px;
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-top-style: double;
border-top-color: #fff;
border-right-width: 6px;
border-bottom-style: double;
border-bottom-color: #fff;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
@keyframes wl3 {
0% {
border-top-style: double;
border-top-color: #fff;
border-right-width: 6px;
border-bottom-style: double;
border-bottom-color: #fff;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-top-style: solid;
border-top-color: #fff;
border-right-width: 9px;
border-bottom-style: solid;
border-bottom-color: transparent;
border-left-width: 3px;
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-top-style: double;
border-top-color: transparent;
border-right-width: 2px;
border-bottom-style: double;
border-bottom-color: transparent;
border-left-width: 2px;
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-top-style: solid;
border-top-color: transparent;
border-right-width: 3px;
border-bottom-style: solid;
border-bottom-color: #fff;
border-left-width: 9px;
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-top-style: double;
border-top-color: #fff;
border-right-width: 6px;
border-bottom-style: double;
border-bottom-color: #fff;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
線の太さや色も変化させていますが、borderの幅が変わると左右の位置に影響がでるため、見出しのテキスト自体が動いてしまっています。
変化させた分だけpaddingなどで調整すれば動いていないように見せることは出来きますが、確認したところブラウザによって微妙に動いて見えました。
具体的には、Chromeだと静止して見えたのですが、Firefoxだと左右に1px程度、小刻みに揺れるような動きになりました。
CSSで要素の四隅をうねらせた見出し 4
<h3 class="wavy-line-v4">CSSで要素の四隅をうねらせた見出し 4</h3>
.wavy-line-v4 {
padding: .5em;
-webkit-animation: wl4 5s infinite linear;
animation: wl4 5s infinite linear;
border-width: 9px;
border-style: dotted;
border-color: #fff;
background-color: #90e0d6;
box-shadow: 0 0 0 5px #90e0d6;
}
@-webkit-keyframes wl4 {
0% {
border-right-width: 6px;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-right-width: 9px;
border-left-width: 3px;
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-right-width: 2px;
border-left-width: 2px;
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-right-width: 3px;
border-left-width: 9px;
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-right-width: 6px;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
@keyframes wl4 {
0% {
border-right-width: 6px;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
25% {
border-right-width: 9px;
border-left-width: 3px;
border-radius: 50px 50px 30px 50px/40% 60% 30% 60%;
}
50% {
border-right-width: 2px;
border-left-width: 2px;
border-radius: 100px 50px 50px 100px/50% 60% 40% 50%;
}
75% {
border-right-width: 3px;
border-left-width: 9px;
border-radius: 50px 100px 100px 50px/60% 50% 50% 40%;
}
100% {
border-right-width: 6px;
border-left-width: 6px;
border-radius: 30px 50px 50px 50px/30% 40% 60% 60%;
}
}
borderをdottedにして太さを変え、秒数を少し調整したもの。
作った本人が言うのもなんですが、見ていると気持ち悪くなってきました。
結び
もう少しいい感じにうねらせたかったのですが、細かい調整がなかなか難しくうまくいきませんでした。
こうして形にしてみると面白そうな反面、以下のような問題も思い浮かびました。
- キモく見えて嫌悪を抱かれる可能性がある
- 気が散って本文に注意が行きづらくなる
- 表示が重くなる
本文中に使う場合は、表現をある程度抑えてバランスを重視する必要があるように思います。
なお、1案しかありませんがロゴっぽいものも作りましたので、気になる方はこちらもどうぞ。
没案
方向性は違いますが、同じく試してダメだったのが以下のものです。
要素の周りを周回させる h4
縦横の長さが可変の状態で、各辺の速度を均一にできないかと考えていたのですが、CSSだけで実現する方法が思いつきませんでした。
JSを使って要素の縦横を検出し、それを元にkeyframeのパーセンテージを変更するという方法ならいけそうかなと思いますが、動的にkeyframeを変更できるのかは試しておらず、本当に実現できるのかは微妙ですが。
JSを使うならJSの使用範囲を増やす方向で検討するのがよいかもしれません。
1人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
