2018年10月17日(水)
border-radiusを使って要素をアニメーションでいろいろな形に変形させる
Result
See the Pen Animating border-radius by kachibito (@kachibito) on CodePen.
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: hi...
0
1
4
21author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Unityにおけるコルーチンの使い方【サンプルあり】
NEXT ›
[ユーザー投稿] ソーシャルログイン/ID連携サービス「ソーシャルPLUS」、 スーツの「AOKIオンラインショップ」にLINEログインオプションを提供
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『border-radiusを使って要素をアニメーションでいろいろな形に変形させる』についてまとめています。
この記事は特にアニメーション・CSS3・Chrome・Firefoxについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
