😎 » DARYA DLE » Готовые дизайны » Анимация кнопки - перезвонить
609 0  

Анимация кнопки - перезвонить

Практически на каждом сайте должна быть кнопка обратного звонка с анимацией.

Демонстрацию кнопки можно посмотреть внизу этой страницы.


fellow Так и тянется рука щелкнуть на такую кнопку и посмотреть всплывающее окно - что там?

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

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023