css3 掉金币动画 |按钮图标纯css

/* 创建金币元素 */
.gold {
position: absolute;
top: -10px;
left: calc(50% - 20px);
width: 40px;
height: 40px;
background-image: url(gold.png);
animation: drop 2s ease-out 0s 1;
}
/* 创建动画效果 */
@keyframes drop {
0% {
opacity: 0;
transform: translate(0, -300px) rotate(180deg) scale(0);
}
50% {
opacity: 1;
transform: translate(0, 200px) rotate(45deg) scale(1);
}
100% {
opacity: 0;
transform: translate(0, 500px) rotate(400deg) scale(0);
}
}
/* 添加金币元素到页面 */
function addGold() {
var gold = document.createElement("div");
gold.classList.add("gold");
document.body.appendChild(gold);
}
/* 触发掉金币动画 */
window.onload = function () {
setInterval(addGold, 100);
}

上述代码中，首先创建了金币元素的样式，并通过 CSS3 的 @keyframes 属性创建了实现掉落动画的关键帧。然后，通过 JavaScript 将动态创建金币元素添加到页面中，并设置定时器触发掉金币动画。

通过这种方式，大家可以轻松地利用 CSS3 来实现各种酷炫的动画效果。当然，要实现出更加精美的效果，还需要结合其他技术进行优化。希望本文能够给你带来一些 CSS3 动画的灵感，让你的网站焕发新的生机。