2016-04-09 22 views
4

Bu karenin üzerine gelmek için eğirme efektine ihtiyacım vardı, aşağıda yazabileceklerim yazılıyor.HTML & CSS kullanarak spin efekti nasıl oluşturulur?

Image

HTML

<div class="mainSquare"> 
    <div class="firstInnerSquare"> 
    <div class="lastInnerSquare"> 
     Hello 
    </div> 
    </div> 
</div> 

CSS

.mainSquare{ 
    width:160px; 
    height:160px; 
    background:black; 
    margin: 50px auto; 
    padding:25px; 
} 
.firstInnerSquare{ 
    width:110px; 
    height:110px; 
    background:red; 
    padding:25px; 
} 
.lastInnerSquare{ 
    text-align:center; 
    width:110px; 
    padding: 46px 0px; 
    background:white; 
} 

Fiddle

Umut yardım almak için.

+5

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. –

+0

hiç duydunuz css prop, animate? –

+0

css ve animasyon –

cevap

10

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 rotate10 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>

+0

çok fazla bilgi sahibi olmak çok hızlı spin nasıl yavaşlatabilirim .. –

+0

@ kishore.k.vaishnav: "Animasyon süresi" ni arttırarak dönüşü yavaşlatabilirsin. Sorunuz altında yorumunuzu gördükten sonra, [animasyonlardaki bu MDN sayfası] 'nı (https://developer.mozilla.org/en/docs/Web/CSS/animation) gözden geçirmenizi tavsiye ederim. – Harry

+1

@Harry GIF SPIN olarak çok hızlısın ... İyi İş .. –

6

Burada özgün yapısı ile bir ve sadece bir anahtar kare ifadesi. "Orta" div'in zamanlaması dış/iç% 50 olmalıdır.

.mainSquare { 
 
    width: 160px; 
 
    height: 160px; 
 
    background: black; 
 
    margin: 50px auto; 
 
    padding: 25px; 
 
    animation: spin 2s infinite linear; 
 
} 
 
.firstInnerSquare { 
 
    width: 110px; 
 
    height: 110px; 
 
    background: red; 
 
    padding: 25px; 
 
    animation: spin 1s infinite linear reverse; 
 
} 
 
.lastInnerSquare { 
 
    text-align: center; 
 
    width: 110px; 
 
    padding: 46px 0px; 
 
    background: white; 
 
    animation: spin 2s infinite linear; 
 
} 
 
@keyframes spin { 
 
    to { 
 
    transform: rotate(1turn); 
 
    } 
 
}
<div class="mainSquare"> 
 
    <div class="firstInnerSquare"> 
 
    <div class="lastInnerSquare"> 
 
     Hello 
 
    </div> 
 
    </div> 
 
</div>

+0

Güzel olan. Bu sadece bir anahtar kareye ihtiyaç duyar :) – Harry

İlgili konular