💨
css-doodleで青空
css-doodleで空を作りました。
大量のbox-shadowで雲を表現しています。
ゆっくりですが、雲が変化していくアニメーションも加えています。
.html
<svg>
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency=".008" numOctaves="100" />
<feDisplacementMap in="SourceGraphic" scale="300" />
</filter>
</svg>
css-doodle
:doodle {
@size: 0px;
box-shadow: @m100( @r(100vw) @r(100vh) @r(50vmin,50vmin) @r(40vmin) @pd(#2198E8, #E9E9F1));
animation: cloud 30s linear infinite;
animatin-delay: 0;
filter: url(#filter);
}
@keyframes cloud {
50% {
box-shadow: @m100( @r(100vw) @r(100vh) @r(40vmin,40vmin) @r(30vmin) @pd(#2198E8, #E9E9F1));
}
}
Discussion