| Kosten | Воскресенье, 07 Октября 2018, 00:22 | Сообщение 1 |
| Кнопка для отправки письма на электронный ящик, так как она с анимацией и эффектами, где после нажатие происходят красивые эффекты на CSS. Где с начало просто нажимаете и появляется конверт, который улетает в правую сторону, и сразу после этого появляется галочка. Это для современного сайта будет отличным решение, а где-то просто его дополнит по своей оригинальной виртуальности.
Так как на таких платформах основном переписываются через обратную связь, что можно ее закрепить под эту функцию. Здесь нужно подчеркнуть, что по умолчанию идет простая кнопка с названием, только когда наводишь клик и соответственно отправляешь, то вся анимация после этого происходит. Хотя можно ее поставить под любой функционал, который по своей деятельности отвечает общение.
Приступаем к установке:
HTML
Код <button class="dekipoldag-kutensa" type="submit">Отправить</button>
CSS
Код .dekipoldag-kutensa {
position:relative;
top:35%;
display:inline-block;
padding:0.5rem 1rem;
border:2px solid rgba(255,255,255,0.5);
background:none;
outline:none;
-webkit-appearance: none;
font-size:2rem;
color:rgba(255,255,255,1);
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.5rem;
text-indent:0.5rem;
cursor:pointer;
transition:
color 1.5s .5s,
border 3s 1s;
}
.dekipoldag-kutensa:before,
.dekipoldag-kutensa:after {
content:'';
position:absolute;
opacity:0;
backface-visibility:visible;
transform-style:preserve-3d;
perspective:400px;
transform-origin:50% -50%;
transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
transition:all 0.5s;
}
.dekipoldag-kutensa:before {
top:5px;
left:50%;
height:3rem;
background:white;
border-top:2rem solid #2980b9;
border-right:3rem solid transparent;
border-left:3rem solid transparent;
}
.dekipoldag-kutensa:after {
top:0;
left:50%;
border-top:2rem solid white;
border-right:3rem solid transparent;
border-left:3rem solid transparent;
}
.dekipoldag-kutensa:hover {
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
transition:
color .25s,
border .25s;
}
.dekipoldag-kutensa:hover:before,
.dekipoldag-kutensa:hover:after {
opacity:1;
transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
animation:sended 4s 0.8s forwards;
}
@keyframes sended {
0% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:0;
transform:rotate(-45deg) translateX(300%) translateY(-500%);
}
5% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:1;
transform:rotate(-45deg) translateX(0) translateY(0);
}
78% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:1;
transform:rotate(-45deg) translateX(0) translateY(0);
}
79% {
height:2rem;
width:3.5rem;
border-top:0;
border-right:0;
border-bottom:10px solid white;
border-left:10px solid white;
opacity:0;
transform:rotate(-45deg) translateX(0) translateY(0);
}
80% {
height:auto;
width:auto;
color:rgba(255,255,255,0);
border:2px solid rgba(255,255,255,0);
opacity:0;
transform:rotate(0) translateX(0) translateY(0);
}
100% {
height:auto;
width:auto;
color:rgba(255,255,255,1);
border:2px solid rgba(255,255,255,0.5);
opacity:1;
transform:rotate(0) translateX(0) translateY(0);
}
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
0% {
opacity:1;
transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
}
33% {
opacity:0.66;
transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
}
100% {
opacity:0;
transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
}
}
JS
Код $(".dekipoldag-kutensa").on("click touchstart", function () {
$(this).addClass("fly");
that = this
setTimeout(function() {
$(that).removeClass("fly");
}, 5400)
});
Если основном создавали на формате Gif, то сейчас все моно сделать при помощи стилистики, что будет намного красивее выглядит на интернет сайте.
Демонстрация
| | Страна: (RU) |
| |
