Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Problem saat animation on click dijalankan
permisi mas , saya mau nanya , saya ngikutin tutorial tentang membuat share button menggunakan animation on click , tapi saat share button tersebut diletakan di footer dan di click maka bagian footer bawah akan memanjang seperti yang ada di gambar , mohon bantuanya..
Tanggapan
Sertain jgak kodingannya gan, biar temen2 bisa liat mngkin ada yg salah dengan kodingnya
3 Jawaban:
sertakan kodingan yang dimaksut, kita gak tahu kodingmu seperti apa jadi gak bakal bisa tahu solusi tanpa tahu alur di koding mu seperti apa.
semoga jelas.
maaf mas , sampe lupa kalo pernah tanya disni
<pre> .section-6{ background-color: #4b4b4b; padding: 50px; }
.section-6 .share{
position: absolute;
left: 50%;
top: 562%;
transform: translate(-50% , -50%) rotate(45deg);
width: 40px;
height: 40px;
}
.section-6 .share ul{ position: absolute; margin: 0%; padding: 0%; width: 100%; height: 100%; }
.section-6 .share ul li{ position: absolute; top: 0%; left: 0%; list-style: none; width: 100%; height: 100%; border-radius: 500px; background: #ffffff; transition: 0.5s; overflow: hidden;
}
.section-6 .share ul.active li{ transform: scale(0.95); }
.section-6 .share ul li a{ position: absolute; top: -65%; left: 1%; width: 100%; height: 190%; line-height: 90px; text-align: center; font-size: 30px; color: #2d98da; transition: .5s; }
.section-6 .share ul li a .fab{ transform: rotate(-45deg); }
.section-6 .share ul li a:hover{
color: #fff;
background: #3867d6;
}
.section-6 .toggle{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: #fc5c65; transform: scale(0.95); overflow: hidden; border-radius: 50px; z-index: 1; cursor: pointer; }
.section-6 .fa-share-alt{ position: absolute; width: 10%; height: 10%; line-height: 30px; top: 45%; left: 1%; color: #fff; font-size: 10px;
text-align: center;
font-size: 30px;
transform: rotate(-45deg);
}
.section-6 .share ul li a .fab{ transform: rotate(-45deg); }
.section-6 .share ul.active li:nth-child(1){ top: 100%; left: -100%; transition-delay: 0.4s; }
.section-6 .share ul.active li:nth-child(2){
top: 200%;
left: -200%;
transition-delay: 0.2s;
}
.section-6 .share ul.active li:nth-child(3){
top: -100%;
left: 100%;
transition-delay: 0.4s;
}
.section-6 .share ul.active li:nth-child(4){
top: -200%;
left: 200%;
transition-delay: 0.2s;
}
</pre>
<pre> <div class="section-6" style="background-color:#4b4b4b;">
&lt;div class="share"&gt;
&lt;div class="toggle icon"&gt;
&lt;i class="fas fa-share-alt"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-facebook-f" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-instagram" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="fab fa-line" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>