का उपयोग करके "सक्रिय कॉल करें" एनीमेशन सेट करें, मुझे अपनी परियोजना के लिए Call active animation चाहिए। मेरे पास ने एक बनाया है लेकिन इसकी एनीमेशन से 100% संतुष्ट नहीं हूं। मैं यहां अपना कोड पेस्ट कर रहा हूं कृपया मुझे एक अच्छा कॉल सक्रिय एनीमेशन बनाने में मदद करें। अगर आपके पास कोई अन्य एनीमेशन सुझाव है तो कृपया आग लगाना। चीयर्स।केवल सीएसएस

मुझे क्या चाहिए एनीमेशन यह दर्शाता है कि उपयोगकर्ता किसी अन्य व्यक्ति से बात कर रहा है।

.rc_side_phone { 
 
    display: inline-block; 
 
    font-size: 34px; 
 
    width: 38px; 
 
    height: 40px; 
 
    background: rgba(94, 178, 2, 0.56); 
 
    color: #fff; 
 
    line-height: 40px; 
 
    border-radius: 7px; 
 
    background: #4CAF50; 
 
    margin-left: 11px; 
 
    margin-top: 8px; 
 
} 
 

 
.rc_side_phone i { 
 
    line-height: 45px; 
 
    margin-left: 4px; 
 
} 
 

 
.rc_side_phone:after { 
 
    position: absolute; 
 
    content: ''; 
 
    border-right: 2px solid #ffffff; 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
    z-index: 9; 
 
    transform: rotate(-44deg); 
 
    -webkit-transform: rotate(-44deg); 
 
    animation: onCall 1s steps(5) infinite; 
 
    -webkit-animation: onCall 1s steps(5) infinite; 
 
    animation-delay: 0s; 
 
} 
 

 
.rc_side_phone:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border-right: 2px solid #ffffff; 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    border-radius: 50%; 
 
    z-index: 9; 
 
    transform: rotate(-44deg); 
 
    -webkit-transform: rotate(-44deg); 
 
    animation: onCallTwo 1s steps(10) infinite; 
 
    -webkit-animation: onCallTwo 1s steps(10) infinite; 
 
    /* animation-delay: 1.5s; */ 
 
} 
 

 
@keyframes onCall { 
 
    0% { 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 31px; 
 
    top: 24px; 
 
    height: 19px; 
 
    } 
 
    /*100%{width: 10px;left: 34px;top: 28px;height: 12px;}*/ 
 
} 
 

 
@-webkit-keyframes onCall { 
 
    0% { 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 31px; 
 
    top: 24px; 
 
    height: 19px; 
 
    } 
 
} 
 

 
@keyframes onCallTwo { 
 
    0% { 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 35px; 
 
    top: 18px; 
 
    height: 23px; 
 
    } 
 
} 
 

 
@[email protected] onCallTwo { 
 
    0% { 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 35px; 
 
    top: 18px; 
 
    height: 23px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="rc_side_phone"> 
 
\t \t <i class="fa fa-phone"></i> 
 
</span>

स्रोत

2017-07-25 weBBer

यह कोई मुद्दा नहीं है। मुझे लगता है कि यह एक सापेक्ष स्थिति है। –

हां यह प्रोग्रामिंग पक्ष में कोई मुद्दा नहीं है लेकिन यह 'उपयोगकर्ता-इंटरफेस' – weBBer

में एक समस्या है [यह प्रश्न [उपयोगकर्ता अनुभव स्टैक एक्सचेंज] (https://ux.stackexchange.com/) के लिए यह प्रश्न अधिक उपयुक्त लगता है। – gfullam

आप देख रहे हैं एक इनकमिंग कॉल एनीमेशन के लिए, इस बारे में क्या ?:

अद्यतन:

मैं करने के लिए सक्रिय कॉल एनीमेशन जोड़ लिया है स्निपेट

UPDATE2:

जोड़ा गया लहर एनीमेशन, और रैखिक लहर एनीमेशन

body { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 

 
.ringing_phone, 
 
.active_phone, 
 
.active_phone2 { 
 
    display: inline-block; 
 
    color: #fff; 
 
    border-radius: 50%; 
 
    background: #4CAF50; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    position: relative; 
 
    margin: 0 10px; 
 
} 
 

 
.ringing_phone i, 
 
.active_phone i, 
 
.active_phone2 i { 
 
    line-height: 50px; 
 
    font-size: 2.25em; 
 
} 
 

 
.ringing_phone i { 
 
    animation: shake 2s infinite cubic-bezier(.36, .07, .19, .97) both; 
 
} 
 

 
.active_phone:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 50%; 
 
    left: 50%; 
 
    background: rgba(255, 255, 255, 0.1); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    border-radius: 50%; 
 
    padding: 0.5em; 
 
    animation: activeCall 2s ease-in-out infinite both; 
 
} 
 

 
.active_phone2:after { 
 
    content: ''; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5)); 
 
    z-index: 11; 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 
.active_phone:before, 
 
.active_phone2:before { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(255, 255, 255, 0.1); 
 
    border-radius: 50%; 
 
    animation: activeCall2 4s linear infinite both; 
 
} 
 

 
.ringing_phone:after, 
 
.ringing_phone:before { 
 
    position: absolute; 
 
    content: ''; 
 
    opacity: 0; 
 
    border-right: 2px solid #ffffff; 
 
    width: 15px; 
 
    height: 15px; 
 
    left: 40%; 
 
    top: 28%; 
 
    border-radius: 50%; 
 
    transform: rotate(-40deg); 
 
    animation: fadeInOne 2s infinite both; 
 
} 
 

 
.ringing_phone:before { 
 
    width: 20px; 
 
    height: 20px; 
 
    left: 40%; 
 
    top: 20%; 
 
    animation: fadeInTwo 2s infinite both; 
 
} 
 

 
.active_phone2 i { 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
.active_phone2 .cover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    border-radius: 50%; 
 
} 
 

 
.wave, 
 
.wave2 { 
 
    opacity: .4; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: -15%; 
 
    background: white; 
 
    width: 130%; 
 
    height: 130%; 
 
    transform-origin: 50% 48%; 
 
    border-radius: 45%; 
 
    animation: drift 3000ms infinite linear; 
 
    opacity: 0.2; 
 
} 
 

 
.wave2 { 
 
    background: none; 
 
    border-radius: 35%; 
 
    top: 40%; 
 
    border: 2px solid white; 
 
} 
 

 
.wave2.two { 
 
    animation: drift 7000ms infinite linear; 
 
    opacity: 0.1; 
 
    top: 42%; 
 
} 
 

 
.wave2.three { 
 
    animation: drift 5000ms infinite linear; 
 
    opacity: 0.05; 
 
    top: 44%; 
 
} 
 

 
.wave.two { 
 
    animation: drift 7000ms infinite linear; 
 
    top: 30%; 
 
    opacity: 0.1; 
 
} 
 

 
.wave.three { 
 
    animation: drift 5000ms infinite linear; 
 
    opacity: 0.05; 
 
    top: 35%; 
 
} 
 

 
@keyframes drift { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes activeCall { 
 
    20% { 
 
    padding: 1em; 
 
    } 
 
    25% { 
 
    padding: 0.5em; 
 
    } 
 
    35% { 
 
    padding: 1.5em; 
 
    } 
 
    50% { 
 
    padding: 1em; 
 
    } 
 
    60% { 
 
    padding: 1.55em; 
 
    } 
 
    80% { 
 
    padding: 0.7em; 
 
    } 
 
    100% { 
 
    padding: 0.5em; 
 
    } 
 
} 
 

 
@keyframes activeCall2 { 
 
    0% { 
 
    padding: 0em; 
 
    background-color: rgba(76, 175, 80, 0); 
 
    } 
 
    25% { 
 
    padding: 1em; 
 
    background-color: rgba(76, 175, 80, 0.5); 
 
    transform: translateX(-1em) translateY(-1em); 
 
    } 
 
    26%, 
 
    100% { 
 
    padding: 0; 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes shake { 
 
    5%, 
 
    45% { 
 
    transform: rotate3d(0, 0, 1, -7deg); 
 
    } 
 
    10%, 
 
    40% { 
 
    transform: rotate3d(0, 0, 1, 7deg); 
 
    } 
 
    15%, 
 
    25%, 
 
    35% { 
 
    transform: rotate3d(0, 0, 1, -7deg); 
 
    } 
 
    20%, 
 
    30% { 
 
    transform: rotate3d(0, 0, 1, 7deg); 
 
    } 
 
    51% { 
 
    transform: rotate3d(0, 0, 0, 0deg); 
 
    } 
 
    100% { 
 
    transform: rotate3d(0, 0, 0, 0deg); 
 
    } 
 
} 
 

 
@keyframes fadeInOne { 
 
    45% { 
 
    opacity: 0 
 
    } 
 
    100% { 
 
    opacity: 1 
 
    } 
 
} 
 

 
@keyframes fadeInTwo { 
 
    55% { 
 
    opacity: 0 
 
    } 
 
    100% { 
 
    opacity: 1 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div> 
 
    <h5>Active call v3</h5> 
 
    <span class="active_phone2"> 
 
    <i class="fa fa-phone"></i> 
 
    <span class="cover"> 
 
     <span class='wave2 one'></span> 
 
     <span class='wave2 two'></span> 
 
     <span class='wave2 three'></span> 
 
    </span> 
 
    </span> 
 
</div> 
 
<div> 
 
    <h5>Active call v2</h5> 
 
    <span class="active_phone2"> 
 
    <i class="fa fa-phone"></i> 
 
    <span class="cover"> 
 
     <span class='wave one'></span> 
 
     <span class='wave two'></span> 
 
     <span class='wave three'></span> 
 
    </span> 
 
    </span> 
 
</div> 
 
<div> 
 
    <h5>Active call</h5> 
 
    <span class="active_phone"> 
 
    <i class="fa fa-phone"></i> 
 
    </span> 
 
</div> 
 
<div> 
 
    <h5>Incoming call</h5> 
 
    <span class="ringing_phone"> 
 
    <i class="fa fa-phone"></i> 
 
    </span> 
 
</div>

स्रोत

2017-07-25 09:22:51 JoseAPL

कोई भी 'सक्रिय कॉल एनीमेशन' नहीं ढूंढ रहा हूं 'इनकमिंग कॉल एनीमेशन' नहीं। मैं एनीमेशन चाहता हूं कि उपयोगकर्ता किसी अन्य व्यक्ति से बात कर रहा हो। – weBBer

@JithinRajPR मैंने अपना जवाब अपडेट कर दिया है, इसे जांचें! – JoseAPL

मुझे एनीमेशन के साथ आपने जो किया है उसे पसंद है और आपका अब तक का सबसे अच्छा जवाब है, लेकिन क्या आपके मन में कोई अन्य विचार है जो मैं उपयोग कर सकता हूं।?, उपयोगकर्ता के लिए थोड़ा अधिक इंटरैक्टिव। – weBBer

आप अपनी कुंजी तख्ते पर अस्पष्टता जोड़ते हैं, तो मुझे लगता है कि इसे और अधिक सुंदर हो जाएगा। Jsfidde: https://jsfiddle.net/e6Lvsrk1/

.rc_side_phone { 
 
     display: inline-block; 
 
     font-size: 34px; 
 
     width: 38px; 
 
     height: 40px; 
 
     background: rgba(94, 178, 2, 0.56); 
 
     color: #fff; 
 
     line-height: 40px; 
 
     border-radius: 7px; 
 
     background: #4CAF50; 
 
     margin-left: 11px; 
 
     margin-top: 8px; 
 
    } 
 
    
 
    .rc_side_phone i { 
 
     line-height: 45px; 
 
     margin-left: 4px; 
 
    } 
 
    
 
    .rc_side_phone:after { 
 
     position: absolute; 
 
     content: ''; 
 
     border-right: 2px solid #ffffff; 
 
     width: 10px; 
 
     left: 34px; 
 
     top: 28px; 
 
     height: 12px; 
 
     border-radius: 50%; 
 
     z-index: 9; 
 
     transform: rotate(-44deg); 
 
     -webkit-transform: rotate(-44deg); 
 
     animation: onCall 1s steps(5) infinite; 
 
     -webkit-animation: onCall 1s steps(5) infinite; 
 
     animation-delay: 0s; 
 
    } 
 
    
 
    .rc_side_phone:before { 
 
     position: absolute; 
 
     content: ''; 
 
     border-right: 2px solid #ffffff; 
 
     width: 16px; 
 
     left: 33px; 
 
     top: 23px; 
 
     height: 17px; 
 
     border-radius: 50%; 
 
     z-index: 9; 
 
     transform: rotate(-44deg); 
 
     -webkit-transform: rotate(-44deg); 
 
     animation: onCallTwo 1s steps(10) infinite; 
 
     -webkit-animation: onCallTwo 1s steps(10) infinite; 
 
     /* animation-delay: 1.5s; */ 
 
    } 
 
    
 
    @keyframes onCall { 
 
     0% { 
 
     width: 10px; 
 
     left: 34px; 
 
     top: 28px; 
 
     height: 12px; 
 
     opacity:0; 
 
     } 
 
     100% { 
 
     width: 18px; 
 
     left: 31px; 
 
     top: 24px; 
 
     height: 19px; 
 
     opacity:1 
 
     } 
 
     /*100%{width: 10px;left: 34px;top: 28px;height: 12px;}*/ 
 
    } 
 
    
 
    @-webkit-keyframes onCall { 
 
     0% { 
 
     width: 10px; 
 
     left: 34px; 
 
     top: 28px; 
 
     height: 12px; 
 
     } 
 
     100% { 
 
     width: 18px; 
 
     left: 31px; 
 
     top: 24px; 
 
     height: 19px; 
 
     } 
 
    } 
 
    
 
    @keyframes onCallTwo { 
 
     0% { 
 
     width: 16px; 
 
     left: 33px; 
 
     top: 23px; 
 
     height: 17px; 
 
     opacity:1 
 
     } 
 
     100% { 
 
     width: 18px; 
 
     left: 35px; 
 
     top: 18px; 
 
     height: 23px; 
 
     opacity:0; 
 
     } 
 
    } 
 
    
 
    @[email protected] onCallTwo { 
 
     0% { 
 
     width: 16px; 
 
     left: 33px; 
 
     top: 23px; 
 
     height: 17px; 
 
     } 
 
     100% { 
 
     width: 18px; 
 
     left: 35px; 
 
     top: 18px; 
 
     height: 23px; 
 
     } 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <span class="rc_side_phone"> 
 
    \t \t <i class="fa fa-phone"></i> 
 
    </span>

स्रोत

2017-07-25 06:37:27

आपके सुझाव के लिए टीवाई, लेकिन इसकी एनीमेशन में सुधार करने के किसी भी तरीके से यह है कि यह 'फोन पर बोलने' का संकेत देगा। मेरी एनीमेशन मैं इसे 'रिंगिंग' की तरह महसूस करता हूं। – weBBer

मैं थोड़ा अपने मूल संस्करण संशोधित, यह एक छोटी एनीमेशन समय दे रही है यह बारी, और animating चरणों के बिना।

.rc_side_phone { 
 
    display: inline-block; 
 
    font-size: 34px; 
 
    width: 38px; 
 
    height: 40px; 
 
    background: rgba(94, 178, 2, 0.56); 
 
    color: #fff; 
 
    line-height: 40px; 
 
    border-radius: 7px; 
 
    background: #4CAF50; 
 
    margin-left: 11px; 
 
    margin-top: 8px; 
 
} 
 

 
.rc_side_phone i { 
 
    line-height: 45px; 
 
    margin-left: 4px; 
 
} 
 

 
.rc_side_phone:after { 
 
    position: absolute; 
 
    content: ''; 
 
    border-right: 2px solid #ffffff; 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
    z-index: 9; 
 
    -webkit-transform: rotate(-44deg); 
 
      transform: rotate(-44deg); 
 
    -webkit-animation: onCall 0.5s infinite alternate; 
 
      animation: onCall 0.5s infinite alternate; 
 
} 
 

 
.rc_side_phone:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border-right: 2px solid #ffffff; 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    border-radius: 50%; 
 
    z-index: 9; 
 
    -webkit-transform: rotate(-44deg); 
 
      transform: rotate(-44deg); 
 
    -webkit-animation: onCallTwo 0.5s infinite alternate; 
 
      animation: onCallTwo 0.5s infinite alternate; 
 
} 
 

 
@-webkit-keyframes onCall { 
 
    0% { 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 31px; 
 
    top: 24px; 
 
    height: 19px; 
 
    } 
 
} 
 

 
@keyframes onCall { 
 
    0% { 
 
    width: 10px; 
 
    left: 34px; 
 
    top: 28px; 
 
    height: 12px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 31px; 
 
    top: 24px; 
 
    height: 19px; 
 
    } 
 
} 
 
@-webkit-keyframes onCallTwo { 
 
    0% { 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 35px; 
 
    top: 18px; 
 
    height: 23px; 
 
    } 
 
} 
 
@keyframes onCallTwo { 
 
    0% { 
 
    width: 16px; 
 
    left: 33px; 
 
    top: 23px; 
 
    height: 17px; 
 
    } 
 
    100% { 
 
    width: 18px; 
 
    left: 35px; 
 
    top: 18px; 
 
    height: 23px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="rc_side_phone"> 
 
\t \t <i class="fa fa-phone"></i> 
 
</span>

स्रोत

2017-08-05 05:47:58 Fionna

केवल सीएसएस

उत्तर

अद्यतन:

UPDATE2:

संबंधित मुद्दे