我一直在努力实现像动画一样的泡泡爆炸。与此类似的东西 http://taotajima.jp/works/the-9d-project/ .当你点击播放按钮时,你可以看到气泡动画。我认为他们在 canvas
中制作了动画。我正在尝试借助 CSS 倾斜属性来完成它,但无法以应有的方式获得它。
.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>
最佳答案
我试了一下你的代码。
你一定想用 animation-fill-mode:
转发;
。
然后我猜你只需要使用 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>
(使用整页代码片段时呈现效果更好)
希望对您有所帮助。
关于javascript - 使用 javascript/css 的气泡爆炸动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50835735/