[PR]当サイトはアフィリエイト広告を利用しています。
リスの繁殖シミュレーションの途中ですが、記事を挟みます。
お日様をCSSアニメーションで作成しました。
今回はこの作り方です。
サンプルの動画も載せます。
まずコードを載せます。
サンプルhtmlがこちら。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>シルルスのコードおきば例題</title>
</head>
<body>
<h1 class="title">CSSアニメーションで太陽を作ってみよう</h1>
<div class="wrapper">
<div class="circle-frame1">
<div class= "triangle"></div>
</div>
<div class="circle-frame2">
<div class= "triangle"></div>
</div>
<div class="circle-frame3">
<div class= "triangle"></div>
</div>
<div class="circle-frame4">
<div class= "triangle"></div>
</div>
<div class="circle-frame5">
<div class= "triangle"></div>
</div>
<div class="circle-frame6">
<div class= "triangle"></div>
</div>
<div class="circle-frame7">
<div class= "triangle"></div>
</div>
<div class="circle-frame8">
<div class= "triangle"></div>
</div>
</div>
</body>
</html>htmlだけでは中身がわからないのでCSSを載せます。
参考にしたサイトはこちら。
cly7796.net. “円周上を移動するアニメーションを実装する”. 2019.10.28 (参照2021-06-21)
Takumi Hirashima. “CSS で三角形を作る方法”. Takumi Hirashima Artworks. 最終更新日 2021.04.02 – 公開日 2017.04.20 (参照2021-06-21)
円周場を動くアニメーションと三角形の作り方を参考にしました。
CSSのサンプルが以下。
.title {
color: #02ccba;
}
.wrapper {
position: relative;
margin-left: 50px;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: orange;
}
.circle-frame1 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(0deg);
animation: rotate1 12s linear infinite;
}
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle-frame2 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(45deg);
animation: rotate2 12s linear infinite;
}
@keyframes rotate2 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}
}
.circle-frame3 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(90deg);
animation: rotate3 12s linear infinite;
}
@keyframes rotate3 {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(450deg);
}
}
.circle-frame4 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(135deg);
animation: rotate4 12s linear infinite;
}
@keyframes rotate4 {
0% {
transform: rotate(135deg);
}
100% {
transform: rotate(495deg);
}
}
.circle-frame5 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(180deg);
animation: rotate5 12s linear infinite;
}
@keyframes rotate5 {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
.circle-frame6 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(225deg);
animation: rotate6 12s linear infinite;
}
@keyframes rotate6 {
0% {
transform: rotate(225deg);
}
100% {
transform: rotate(585deg);
}
}
.circle-frame7 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(270deg);
animation: rotate7 12s linear infinite;
}
@keyframes rotate7 {
0% {
transform: rotate(270deg);
}
100% {
transform: rotate(630deg);
}
}
.circle-frame8 {
position: absolute;
top: -5px;
left: calc(50% - 10px);
width: 20px;
height: calc(50% + 5px);
transform-origin: center bottom;
transform: rotate(315deg);
animation: rotate8 12s linear infinite;
}
@keyframes rotate8 {
0% {
transform: rotate(315deg);
}
100% {
transform: rotate(675deg);
}
}
@keyframes stretch {
0% {
clip-path: polygon(0 90%, 50% 50%, 100% 90%);
}
50% {
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
100% {
clip-path: polygon(0 90%, 50% 50%, 100% 90%);
}
}
.triangle {
margin-top: -20px;
width: 20px;
height: 20px;
background-color: #FF6600;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
animation: stretch 2s linear infinite;
}長くなりましたが
.wrapperで箱を作って、 .circle-frame1で中心から円周までの棒を作ってそれを回転させる。それから.triangleで三角形を描画しています。
CSSアニメーションであるrotate1で回転、stretchで三角形を大きくしたり小さくしたりしています。
パラメーターは感覚的に決めています。ここをいじったら大きくなったから大きくしてみよう、もっと上だからここのパラメーターを大きく、小さくしてみようくらいの感覚で作りました。あまり詳しい原理はわかっていません。
とりあえず完成品ができればよいです。
パラメーター探索が結構大変でした。
CSSアニメーションは結構面白いです。
他に何か作れたらまた載せるかもしれません。
