どうも！LSSです！！
CSSを色々いじっていると、こんなものが出来ました。
彗星の尾
取り囲まれた
中に文字が
入っています
コード
<style>
@keyframes wa1a{
0%{transform:rotate(0deg);}
100%{transform:rotate(-360deg);}
}
@keyframes wa2a{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.wa1{
box-sizing:border-box;
width:250px;height:250px;/*外枠の大きさ 調整可*/
border-radius:50%;
background-image:
conic-gradient(from 300deg,#88ffaaff 0deg,#88ffaa00 240deg);/*周囲を廻っているいる色と長さ*/
padding:10px 20px 15px 0px;
animation:wa1a 5s linear infinite;
}
.wa2{
box-sizing:border-box;
width:100%;
height:100%;
border-radius:50%;
background-color:#ffffff;/*内側の塗りつぶし色*/
text-align:center;
padding:20%;/*内部余白 文字量に併せて調整*/
animation:wa2a 5s linear infinite;
}
</style>
<div class="wa1">
<div class="wa2">こんな風に<br />取り囲まれた<br />中に文字が<br />入っています</div>
</div>
なんだこりゃｗ
影響を受けた元ネタがあるのですが、オリジナリティを加えたところ こうなりましたｗ
中の文字がふよふよ動くところが良いんだか良くないんだか？
…もうちょっと洗練させたいところもありますが^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
