CSS样式.red-envelope {
position: relative;
width:200px;
height:200px;
background-color: red;
border-radius:10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:20px;
}
.envelope-top {
width:80px;
height:40px;
background-color: fff;
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
border-radius:5px;
}
.envelope-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height:100%;
padding:20px0;
}
.envelope-line {
width:80%;
height:2px;
background-color: fff;
}
draw-btn {
padding:10px20px;
background-color: f00;
color: fff;
border: none;
border-radius:5px;
cursor: pointer;
margin-top:20px;
}
.draw-img {
width:100px;
height:100px;
margin-top:20px;
display: none;
}
JS代码$(function () {
$("draw-btn, .draw-img").on("click", function () {
$(".red-envelope").addClass("open");
$("draw-btn").hide();
$(".draw-img").show();
});
});
CSS动画.red-envelope.open .envelope-top {
height:0;
}
.red-envelope.open .envelope-line:nth-child(1) {
transform: translateY(-10px) rotate(45deg);
}
.red-envelope.open .envelope-line:nth-child(2) {
transform: translateY(-5px) rotate(-45deg);
}
.red-envelope.open .envelope-line:nth-child(3) {
transform: rotate(90deg);
}
.red-envelope.open .envelope-line:nth-child(4) {
transform: translateY(5px) rotate(45deg);
}
.red-envelope.open .envelope-line:nth-child(5) {
transform: translateY(10px) rotate(-45deg);
}
这段代码实现了一个简单的微信红包领取动画特效。首先在HTML中创建了一个红包的结构，包括红包的顶部和身体部分，以及一个点击领取的按钮和打开红包的图片。然后在CSS中对红包进行了样式的设置，包括红包的样式和按钮的样式。在JS中使用jQuery来实现点击按钮后的动画效果，当点击按钮时，红包打开的动画效果就会触发，同时按钮会隐藏，打开红包的图片会显示出来。最后在CSS中设置了红包打开的动画效果，通过改变红包顶部和身体部分的样式来实现打开的动画效果。
这段代码的实现过程比较简单，但是通过这个例子可以了解到如何利用jQuery来实现一些简单的动画效果。在实际的项目中，可以根据需求对动画效果进行更加复杂的设置，来实现更加丰富的交互效果。同时，也可以结合CSS3的一些动画效果来实现更加炫酷的动画效果。希望这个例子可以帮助到你，如果有任何问题，欢迎随时提问。
