[分享]css3撒金币特效

CSS3撒金币特效是一种非常流行的CSS3特效，它可以用来增强网站的视觉效果，从而吸引更多的用户。这种特效可以很容易地通过CSS3动画来实现。下面让我们来看一下如何使用CSS3创建撒金币特效。/ CS...

CSS3撒金币特效是一种非常流行的CSS3特效，它可以用来增强网站的视觉效果，从而吸引更多的用户。这种特效可以很容易地通过CSS3动画来实现。下面让我们来看一下如何使用CSS3创建撒金币特效。

/* CSS代码 */
@keyframes shooting-star {
0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
}
50% {
    opacity: 0;
    transform: translateY(-300px) rotate(-360deg) scale(0.5);
}
100% {
    opacity: 1;
    transform: translateY(0) rotate(-720deg) scale(1);
}
}

@keyframes coin {
0%   { transform: translateY(0); }
50%  { transform: translateY(-150px); }
100% { transform: translateY(0);}
}

.coin-wrapper {
position: absolute;
left: 50%;
margin-left: -270px;
bottom: 30%;
}

.coin {
position: relative;
float: left;
width: 54px;
height: 54px;
background: url("../images/coin.png") no-repeat;
background-size: contain;
animation: coin 0.8s infinite cubic-bezier(0.1, 0.57, 0.4, 1.07);
}

.shooting-star {
position: absolute;
left: 50%;
margin-left: -300px;
bottom: 0%;
width: 100px;
height: 400px;
background: url("../images/shooting-star.png") no-repeat;
background-size: contain;
animation: shooting-star 3.5s linear infinite;
} 

代码中首先定义了shooting-star和coin两个关键帧动画，通过animation属性将其绑定到HTML元素上以实现动画效果。其中，shooting-star关键帧动画定义了一个半径为300px、转动速度为720度的星形轨迹，并且整个动画周期为3.5s。而coin关键帧动画则定义了金币向上飞弹落的动画效果，并且整个动画周期为0.8s。

接下来，我们需要创建HTML结构并使用CSS对其进行布局。通过一个父容器和多个子容器的方式，我们可以实现多个金币同时撒落的效果。父容器可以使用position: absolute属性进行定位，而子容器则通过float: left属性实现水平排列。最后，我们将两个动画绑定到父容器和子容器上即可。

综上，CSS3撒金币特效是一种在网站设计中经常使用的特效，它可以让网页变得更加生动有趣，吸引用户的眼球。如果你也想使用这种特效，不妨尝试一下上面的代码吧。