Анимация кнопки - перезвонить
Практически на каждом сайте должна быть кнопка обратного звонка с анимацией.
Демонстрацию кнопки можно посмотреть внизу этой страницы.
Так и тянется рука щелкнуть на такую кнопку и посмотреть всплывающее окно - что там?
html и css код:
<a class="knoptimg" onclick=""><s></s></a>
<style>
.knoptimg{display:block; width:60px; height:60px; background-color:#29AEE3; border-radius: 100%; border: 2px solid transparent; position:fixed; bottom:50px; right:50px; transform-origin: center; opacity: .7; z-index:9999; }
.knoptimg::after{content:'';display:block; width:86px; height:86px; background-color:#29AEE3; border-radius: 100%; border: 2px solid transparent; position:absolute; bottom:-17px; right:-17px; animation: circle-fill-anim 2.3s infinite ease-in-out; transition: all 0.5s; }
.knoptimg::before{content:'';display:block; width:130px; height:130px; border: 2px solid #29AEE3; border-radius: 100%; position:absolute; bottom:-39px; right:-39px; opacity: .5; animation: circle-anim 2.4s infinite ease-in-out !important; transition: all 0.5s; }
.knoptimg s{display:block; width:72px; height:72px; background: url(https://layout.rullan.in.ua/uploads/posts/2019-03/1551577544_call-master.png) 17px 17px no-repeat; transform-origin: center; animation-name: tossing; animation-duration: 1.5s; animation-iteration-count: infinite; }
.knoptimg:hover{opacity: 1; }
@keyframes pulse {0% {transform: scale(0.9); opacity: 1; } 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9); opacity: 1; }}
@keyframes tossing {0% {transform: rotate(-8deg); } 50% {transform: rotate(8deg); } 100% {transform: rotate(-8deg); }}
@keyframes circle-anim {0% {transform: rotate(0deg) scale(0.5) skew(1deg); opacity: .1; } 30% {transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .5; } 100% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .1; }}
@keyframes circle-fill-anim {0% {transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% {transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; }}
</style