Вид анимации взрыва пузыря при использовании javascript / css
Я пытался добиться, чтобы пузырь взорвался как анимация. Что-то похожее на этот http://taotajima.jp/works/the-9d-project/. Когда вы нажимаете кнопку воспроизведения, вы можете увидеть пузырьковую анимацию. Думаю, они сделали анимацию на canvas. Я пытаюсь сделать это с помощью свойства CSS skew, но не могу получить его должным образом.
.wobble-top:hover {
width:160px;
animation-name: wobble-top;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.wobble-top {
display: inline-block;
transform-origin: 0 100%;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
background:black;
color:white;
height:120px;
width:120px;
line-height:120px;
text-align:center;
position:absolute;
right:0;
top:10px;
transition: width 0.3s ease-in-out;
border-radius: 60px
}
/* Wobble Top */
@keyframes wobble-top {
16.65% {
transform: skew(-12deg);
}
33.3% {
transform: skew(10deg);
border-radius:30px
}
49.95% {
transform: skew(-6deg);
width:50%;
height:50%;
border-radius:20px
}
66.6% {
transform: skew(4deg);
border-radius:10px;
width:70%;
height:70%;
}
83.25% {
transform: skew(-2deg);
width:80%;
height:80%;
border-radius:0px
}
100% {
transform: skew(0);
width:100%;
height:100%;
}
}<a rel = "wobble-top" class = "button wobble-top" style = "
">Wobble Top</a>Тот, что в вашем связанном примере, сделан в контексте webgl. Возможно, существует способ CSS с использованием SVG-фильтров, таких как feDisplacementMap, но я думаю, что это было бы довольно громоздко для его написания и, вероятно, не везде будет работать очень хорошо. ИМО, лучше держи это на холсте
@TakitIsy Он должен работать как связанный пример
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я немного поигрался с вашим кодом.
Вы должны захотеть использовать animation-fill-mode:forwards;.
Тогда, я думаю, вам просто нужно поиграть со значениями skew() (обратите внимание, что skew() может принимать 2 значения в качестве параметров), чтобы добраться до как это должно быть. Я вроде как пробовал.
Я немного замедлил анимацию и прокомментировал animation-iteration-count: infinite;, потому что меня начало тошнить!…
(Подробнее см. Комментарии в коде.)
.wobble-top:hover {
color: black;
/*width:160px; TAKIT: Remove that! */
animation-name: wobble-top;
animation-duration: 2s;
animation-timing-function: ease-out;
/*animation-iteration-count: infinite; TAKIT: Commented */
animation-fill-mode: forwards; /* TAKIT: Added */
}
.wobble-top {
display: inline-block;
transform-origin: 0 100%;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
background: black;
color: white;
line-height: 120px;
text-align: center;
position: absolute;
right: 0;
top: 10px;
height: 120px;
width: 120px;
border-radius: 100%; /* TAKIT: Changed here */
transition: color 1s ease; /* TAKIT: Added */
}
/* Wobble Top */
@keyframes wobble-top {
30% {
transform: skew(0, -2deg);
height: 160px;
width: 240px;
}
50% {
transform: skew(6deg, 3deg);
}
60% {
transform: skew(-2deg, -4deg);
}
70% {
transform: skew(4deg, -6deg);
width: 50%;
height: 50%;
}
80% {
transform: skew(0, 0);
width: 75%;
height: 75%;
border-radius: 20%;
}
90% {
transform: skew(0, 0);
width: 90%;
height: 90%;
border-radius: 10%;
}
100% {
transform: skew(0, 0);
width: 100%;
height: 100%;
border-radius: 0%; /* TAKIT: Added to work with the "forwards" animation-fill-mode */
}
}<a rel = "wobble-top" class = "button wobble-top">Wobble Top</a>(Лучшая отрисовка при использовании полноразмерного фрагмента)
Надеюсь, поможет.
Можете ли вы уточнить, что не так с вашей анимацией и что такое как это должно быть?