蝶を目指しました。
DEMO
HTML
<div class="arc"> <div class="box"> <div class="butterfly"> <div class="head"></div> <div class="body"> <div class="wing l"></div> <div class="wing r"></div> </div> </div> </div> </div>
SCSS
%block { display: block; position: absolute; border: solid rgba(0, 0, 0, 0); width: 0; height: 0; } body { background: #000; } .arc { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; width: 320px; height: 320px; background: #fff; -webkit-filter: blur(1px); } .box { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: move 3.6s ease-in-out infinite; } .butterfly { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: fly 1.8s ease-in-out infinite alternate; } .head { @extend %block; top: -20px; left: -10px; border-width: 10px; border-top: solid 20px rgba(0, 0, 0, 1); &:before { @extend %block; top: -55px; left: -12px; content: ""; border-top: solid 30px rgba(0, 0, 0, 1); transform: rotate(-8deg); } &:after { @extend %block; top: -55px; right: -12px; content: ""; border-top: solid 30px rgba(0, 0, 0, 1); transform: rotate(8deg); } } .body { @extend %block; top: 10px; left: -10px; border-width: 10px; border-bottom: solid 25px rgba(0, 0, 0, 1); .wing { position: absolute; top: 10px; animation: swing .6s ease-in-out infinite alternate; &.l { transform: rotateY(10deg); transform-origin: right center; &:before { @extend %block; top: -60px; left: -85px; border-width: 40px; border-left: solid 80px rgba(0, 0, 0, 1); content: ""; transform: rotate(8deg) skewX(8deg); transform-origin: right center; } &:after { @extend %block; top: -70px; left: -80px; border-width: 30px; border-left: solid 70px rgba(0, 0, 0, 1); content: ""; transform: rotate(-42deg) skewX(8deg); transform-origin: right center; } } &.r { transform-origin: left center; &:before { @extend %block; top: -60px; left: -35px; border-width: 40px; border-right: solid 80px rgba(0, 0, 0, 1); content: ""; transform: rotate(-8deg) skewX(-8deg); transform-origin: left center; } &:after { @extend %block; top: -70px; right: -80px; border-width: 30px; border-right: solid 70px rgba(0, 0, 0, 1); content: ""; transform: rotate(42deg) skewX(-8deg); transform-origin: left center; } } } } @keyframes swing { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-60deg); } } @keyframes fly { 0% { transform: rotateZ(0deg); } 33% { transform: rotateZ(10deg); } 66% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-10deg); } } @keyframes move { 0% { transform: scale(.5) translate(-300px, 300px); } 50% { transform: scale(.6) translate(0, 0); } 100% { transform: scale(.5) translate(300px, -300px); } }