6
Jeśli trafisz na papierową płaszczyznę poniżej, zaimplementowałem animację, która odzwierciedla trójkąt i przełącza kolory, ale staram się uzyskać płynność. Trochę się kręci, a ty dostajesz brzydkie białe linie pomiędzy animacjami. Czy ktoś wie, jak poprawić ten kod lub mieć alternatywny (lepszy) sposób, aby wykonać moją animację.Pobierz płyn animacji CSS
$('.contact .topbar .paperplane').click(function(){
if($('.contact').hasClass('active')){
$('.contact').removeClass('active');
}else{
$('.contact').addClass('active');
}
});.contact{
\t position:relative;
\t background:#445;
}
.contact .topbar{
\t height:200px;
\t
\t background:linear-gradient(to bottom, #fff 50%, #445 50%);
\t background-size: 100% 200%;
background-position:top right;
\t transition:1s;
}
.contact .topbar .paperplane{
\t width:75px;
\t height:75px;
\t position:absolute;
\t top:50%;
\t left:50%;
\t transform:translate(-50%,-50%);
\t cursor:pointer;
\t
\t animation: bounce 5s infinite;
}
.contact .topbar .paperplane path{
\t fill:#aab;
\t transition:0.2s;
}
.contact .topbar .paperplane:hover path{
\t fill:#445;
transition:1s;
}
.contact .topbar .arrowDown{
\t height:200px;
\t width:100%;
\t position:absolute;
\t top:0;
\t transition:1s;
}
/* \t active*/
.contact.active .topbar{
\t background-position:bottom right;
}
.contact.active .topbar .arrowDown{
\t -moz-transform: scaleY(-1);
\t -o-transform: scaleY(-1);
\t -webkit-transform: scaleY(-1);
\t transform: scaleY(-1);
\t filter: FlipV;
\t -ms-filter: "FlipV";
}
.contact.active .topbar .arrowDown polygon{
\t fill:#fff;
\t transition-delay:0.5s;
}
.contact.active .topbar .paperplane:hover path{
fill:#fff;
}
@keyframes bounce {
\t 0% {
\t \t top:50%;
\t }
\t 25%{
\t \t top:50%;
\t }
\t /* \t --- \t */
\t 32%{
\t \t top:52%;
\t }
\t 35% {
\t \t top:40%;
\t }
\t 40%{
\t \t top:50%;
\t }
\t /* \t --- \t */
\t 70%{
\t \t top:50%;
\t }
\t 77%{
\t \t top:52%;
\t }
\t 80% {
\t \t top:40%;
\t }
\t 85%{
\t \t top:50%;
\t }
\t /* \t --- \t */
\t 92%{
\t \t top:52%;
\t }
\t 95%{
\t \t top:40%;
\t }
\t 100% {
\t \t top:50%;
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="contact">
\t \t <div class="topbar">
\t \t \t <svg version="1.1" class="arrowDown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
\t \t \t \t viewBox="0 0 1000 125" enable-background="new 0 0 1000 125" xml:space="preserve" preserveAspectRatio="none">
\t \t \t \t <polygon fill="#445" points="0,0 500,125 0,125"/>
\t \t \t \t <polygon fill="#445" points="1000,0 500,125 1000,125"/>
\t \t \t </svg>
\t \t \t <svg version="1.1" class="paperplane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 334.5 334.5" style="enable-background:new 0 0 334.5 334.5;" xml:space="preserve"> <path d="M332.797,13.699c-1.489-1.306-3.608-1.609-5.404-0.776L2.893,163.695c-1.747,0.812-2.872,2.555-2.893,4.481 s1.067,3.693,2.797,4.542l91.833,45.068c1.684,0.827,3.692,0.64,5.196-0.484l89.287-66.734l-70.094,72.1 c-1,1.029-1.51,2.438-1.4,3.868l6.979,90.889c0.155,2.014,1.505,3.736,3.424,4.367c0.513,0.168,1.04,0.25,1.561,0.25 c1.429,0,2.819-0.613,3.786-1.733l48.742-56.482l60.255,28.79c1.308,0.625,2.822,0.651,4.151,0.073 c1.329-0.579,2.341-1.705,2.775-3.087L334.27,18.956C334.864,17.066,334.285,15.005,332.797,13.699z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
\t \t </div>
\t </section>
Dziękuję bardzo. Ale w rzeczywistości rzeczą pozytywną/negatywną jest najważniejsza rzecz. Wszystkie moje treści powyżej są białe, a cała zawartość poniżej to "# 445", więc muszę zmienić kolory. Czy może masz na to rozwiązanie? –