アメブロで使える！お知らせ枠をアニメーション化する方法
こんばんは！難病フリーランスの圭介です僕は、指定難病である「アジソン病」、及び「下垂体前葉機能低下症」を抱えながら、フリーランスとして働いています。今日は、お知らせ枠をグラデーション＆アニメーションで飾る方法をご紹介します。このお知らせ枠を使えば、目立つこと間違いなしですグラデーションボーダーアニメーションまずはデモからご覧ください。デモここに内容を書く！実際に作ってみたものの、想像以上に目立ってますね実装方法以下のコードを、コピペするだけで簡単に実装できます。コード<style type="text/css">.animated-border { border: 5px solid transparent; border-radius: 12px; padding: 20px; background:linear-gradient(white, white) padding-box,linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) border-box; background-size: auto, 400%; background-position: center, 0% 50%; animation: borderAnim 5s linear infinite;} @keyframes borderAnim { 0% {background-position: center, 0% 50%;} 50% {background-position: center, 100% 50%;} 100% {background-position: center, 0% 50%;} }</style></p><div class="animated-border">ここに内容を書く！</div>線の太さを調整したい場合は、コード中の「5px」と記述されている部分を好みの数値に変更してください。まとめ今日は、お知らせ枠をグラデーション＆アニメーションで飾る方法を紹介しました。目立たせたいお知らせがあるときには、ぜひ使ってみてください今日も最後までお読みいただきありがとうございました。少しでも参考になれば幸いです。@import url("https://ekusiek.works/ameba.css"); .animated-border { border: 5px solid transparent; border-radius: 12px; padding: 20px; background: linear-gradient(white, white) padding-box, linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) border-box; background-size: auto, 400%; background-position: center, 0% 50%; animation: borderAnim 5s linear infinite;}@keyframes borderAnim { 0% { background-position: center, 0% 50%; } 50% { background-position: center, 100% 50%; } 100% { background-position: center, 0% 50%; }}
