水の波紋っぽいエフェクト
Result 水上で起こる波紋のようなエフェクトです csshtml, body {/*bodyの背景を波紋の色に合わせる*/ margin: 0; background: #45c2c5; } .ripple, .ripple:before, .ripple:after {/*疑似要素も作り、3つの波紋を作る*/ display: block; border-radius: 2px; width: 2px; height: 2px; animation: rip 6s infinite ease-out; } .ripple { position: absolute; z-index: -1; top: 40px; left: 15px; } .ripple:before, .ripple:after { content: ""; position: absolute; } .rippl
ボタンにSVGを使って水がせりあがる様なホバーエフェクト
Result SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルターで参照しています。 css.c-button--gooey {/*ボタンの基本スタイル*/ color: #06c8d9; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px; border: 4px solid #06c8d9; border-radius: 0; padding: 1.2em 3.4em; position: relative; transition: all 700ms ease; } .c-button--gooey .c-button__blobs {/*HTMLで書いたSVGを参照*/ height: 100%; filter: url(#goo); overflow: hidd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
