どうも！LSSです！！
ちょっと思いつきで「三角形を敷き詰めた背景模様」を考えていたのですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。
…という実験的な記事です。
動く三角背景
コード
<style>
@keyframes sankakua{
0%,10%{background-position:60px 0px,40px 35px,0px 35px,60px 0px,20px 0px,40px 35px,0px 35px,20px 0px;}
20%,30%{background-position:60px 0px,20px 70px,0px 35px,40px 35px,-20px 0px,20px 70px,-40px 35px,0px 35px;}
40%,50%{background-position:20px 0px,-20px 70px,-40px 35px,0px 35px,20px 0px,60px 70px,0px 35px,40px 35px;}
60%,70%{background-position:0px 35px,20px 70px,-60px 70px,40px 35px,0px 35px,60px 70px,-20px 70px,40px 35px;}
80%,100%{background-position:40px 35px,-20px 70px,-20px 70px,0px 35px,-40px 35px,100px 70px,-60px 70px,80px 35px;}
}
.sankaku{
width:300px;
height:200px;
border:1px solid black;
background-image:
conic-gradient(from 150deg at 50% 50%,#cccc44 59.9deg,#cccc4400 60deg)
,conic-gradient(from 150deg at 50% 50%,#cccc44 59.9deg,#cccc4400 60deg)
,conic-gradient(from 330deg at 50% 50%,#4444cc 59.9deg,#4444cc00 60deg)
,conic-gradient(from 330deg at 50% 50%,#4444cc 59.9deg,#4444cc00 60deg)
,conic-gradient(from 330deg at 50% 50%,#44cc44 59.9deg,#44cc4400 60deg)
,conic-gradient(from 330deg at 50% 50%,#44cc44 59.9deg,#44cc4400 60deg)
,conic-gradient(from 150deg at 50% 50%,#cc4444 59.9deg,#cc444400 60deg)
,conic-gradient(from 150deg at 50% 50%,#cc4444 59.9deg,#cc444400 60deg)
;
background-size:80px 70px;
animation:sankakua linear 15s infinite;
}
</style>
<div class="sankaku"> </div>
三角形のサイズ
今回は「底辺40px、高さ35px」としています。
これは「 2 : √3 」に近い比率で、正三角形っぽくしたかったところからの設定です。
動かすのにあたり「斜めの移動」も、横位置と縦位置を入れておくとスムーズに移動してくれています…が、「白」が出てくるのが心残りで^^;
「左斜め下への移動」を「斜めを列とみなして２列に１列だけ動かす」をしようとすると…「三角形の数が今の倍必要になる」というのに後から気づいて（つまり今でさえ８つもあるconic-gradientが16必要になる）、諦めて誤魔化した結果ですｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
