6
यदि आप नीचे पेपरप्लेन पर हिट करते हैं तो मैंने एक एनीमेशन लागू किया है जो त्रिभुज को प्रतिबिंबित करता है और रंगों को स्विच करता है, लेकिन मैं इसे तरल पदार्थ प्राप्त करने के लिए संघर्ष कर रहा हूं। एनीमेशन के बीच बदसूरत सफेद रेखाएं पाने के बाद कभी-कभी यह अटक जाता है। क्या कोई जानता है कि इस कोड को कैसे सुधारें या मेरे एनीमेशन को पूरा करने के लिए एक वैकल्पिक (बेहतर) तरीका है।सीएसएस एनीमेशन तरल पदार्थ प्राप्त करें
$('.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' है इसलिए मुझे रंग स्विच करने की आवश्यकता है। क्या आपके पास इसका समाधान हो सकता है? –