Result
border-radiusで作れる様々な形状を利用してkeyframesでアニメーション変形させる、というもの
尚、形状は先日書いた記事で手軽に作成できます。以下、宜しければご参照ください。
→ ユニークな形状も作れるborder-radiusジェネレーター・「FANCY-BORDER-RADIUS」
css
div {/*要素のスタイル。サンプルのようにテキストを含めるならoverflow: hidden;をしないとはみ出ます*/ width: 20%; height: auto; margin: auto; background-color: #21d4fd;margin-top:20px; border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0,0,0,0.2); animation: morphing 10s infinite; overflow: hidden;}div:hover {/*マウスホバーでアニメーション停止*/ animation-play-state: paused;}@keyframes morphing {/*border-radiusで要素を様々な形状に変形させるアニメーション*/ 0% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0,0,0,0.2); } 25% { border-radius: 58% 42% 75% 25%/76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67%/55% 27% 73% 45%; box-shadow: -10px -5px 50px rgba(0,0,0,0.2); } 75% { border-radius: 33% 67% 58% 42%/63% 68% 32% 37%; }} |
html
<div><h1>江戸を東京と改称する構想は、江戸時代後期の経世家である佐藤信淵が文政6年（1823年）に著した『混同秘策』にすでに現れていた。</h1></div> |
via
Animating border-radius
余談ですが、元記事ではクリックすると要素が複製されるバグがありましたのでコードを少し変更しています。
（Opera最新のみ。Chrome、Edge、Firefox共に問題なし）
