Bunu tek bir öğe ve iki psödos kullanarak yapabilirsiniz. Kapsayıcı öğeden daha büyük olan 2 sözde öğeyi yapın, kapsayıcının arkasına yerleştirin ve bunlara bir rotate
10 animasyon ekleyin.
Not: Bu, yalnızca başlamanıza yardımcı olacak temel bir örnektir. Senin için ince ayar parçasını bırakırım. CSS animasyon özellikleri hakkında daha fazla bilgiyi this MDN page numaralı telefondan okuyabilirsiniz.
değişen ihtiyacı olan tek şey, div başına , animasyon süresi ve yöndeydi:
.shape {
position: relative; /* used to position the pseudos relative to the parent */
height: 100px;
width: 100px;
background: white;
border: 1px solid;
margin: 100px; /* required because children are larger than parent */
}
.shape:after,
.shape:before {
position: absolute;
content: '';
}
.shape:before {
height: 125%; /* make one pseudo 25% larger than parent */
width: 125%;
top: -12.5%; /* 25/2 to make sure its center is same as the parent's */
left: -12.5%; /* 25/2 to make sure its center is same as the parent's */
background: red;
z-index: -1; /* send it behind the parent */
}
.shape:after {
height: 150%; /* make this pseudo larger than the parent and the other pseudo */
width: 150%;
top: -25%; /* 50/2 to make sure its center is same as the parent's */
left: -25%; /* 50/2 to make sure its center is same as the parent's */
background: black;
z-index: -2; /* send it behind both the parent and other pseudo */
}
/* add animation when hovering on parent */
.shape:hover:before {
animation: rotate 3s linear infinite;
}
.shape:hover:after {
animation: rotate-rev 3s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */
}
}
@keyframes rotate-rev {
to {
transform: rotate(-359deg); /* reverse direction rotate */
}
}
<div class='shape'></div>
Size en az girişimi kendiniz için bu kodlamak için beklenmektedir. Yığın Taşması bir kod yazma hizmeti değildir. Google üzerinden veya SO arayarak, bir girişimde bulunun ve ek araştırmalar yapmanızı öneririm. Eğer hala sorun yaşıyorsanız, ** kodunuzla geri dönün ve neleri denediğinizi ve neden çalışmadığını açıklayın. –
hiç duydunuz css prop, animate? –
css ve animasyon –