6
如果您點擊下面的paperplane，我已經實現了一個反映三角形並切換顏色的動畫，但我正在努力讓它變得流暢。它會在某些時候陷入困境，並且在動畫之間會出現難看的白線。有誰知道如何改善這個代碼或有一個替代（更好）的方式來完成我的動畫。獲取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>
非常感謝你。但實際上，正面/負面的事情是最重要的。我上面的所有內容都是白色的，下面的所有內容都是＃445，所以我需要切換顏色。你可能有解決方案嗎？ –