a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.
![[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d41a2b3d32f975af021789ebc336e7dd920a95d7/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201804%2F2018101603.gif)
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css :root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;c
Result SVGとCSSで作れるサークルプログレスバーです css @keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; } } .progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ conte
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
