Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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>