![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG3EXatcY4c_rsdnmKH9ktagpGVyTsnl88M12HUSgSB1XeXS7zqp_V-7hRemmtDznV2dRnuAxhlGW-fZ3iEOfOnYiFRgJKf6myyTIZEeyFtkUcnkz0rmUOiWuMiP6uTfSJpLjLPpIyvxu5Ncz3R39WKb4RNLG8XGJhD1HgjDYZagW3isoIDrOBepu/s1600-rw/1655332541_0.jpg)
サンプル
ソースコード
このSVG効果はJSを一切使わずに実行できるので、ネットワーク通信に置いて非常に帯域負荷の少ない方法です。<div id="preload" class="loading-ani">
<div class="bound bd-1"></div>
<div class="bound bd-2"></div>
<svg style="position: absolute;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="water">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</defs>
</svg>
</div>
<style>
#preload{
filter:url(#water);
}
.bound{
position:absolute;
top:100px;
background-color:black;
border-radius:50%;
width:100px;
height:100px;
animation: scaleCircle 3s ease-in-out infinite;
}
.bd-1{
left:100px;
}
.bd-2{
left:200px;
}
@keyframes scaleCircle{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5 , 0.5);
}
100%{
transform: scale(1);
}
}
</style>
ちなみに、Codepenのリンクも載せておきます。
css-bond | Codepen
See the Pen css-bond by YugetaKoji (@geta1972) on CodePen.
応用アイデア
ページローディングや、ホームページの効果的な演出などに使えますね。 実際にこの効果を見たのが、とあるWEBサイトの読み込み画面だったので、非常にアイデア次第で、視覚効果が得られるとてもいい機能であると理解できました。 自分用の効果ライブラリを作っておくと仕事で使う時に便利に使えますよね。 ちなみに、ブラウザの対応状況ですが、「98.12%」の網羅性との事です。 Inline SVG in HTML5![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01mORlzf_z16xYQpfEDTX7Q0igfm-3x6ryCWQr-Zuz0KhP3ETunx9pf-K3rmJBZtQ1bjJeWekzLum2HGTNob0N5VnUjQ0AtvBVLZeWtRPdfbZixYL3mWVC6fBR92zppc0HUybUSsmBOwv5X7-yWS7sv2-ZY0VIEm9BAD8FJkrE-7czhb8xQCHV9lU/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-03-31-9.40.04.png)
0 件のコメント:
コメントを投稿