PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
今天是大年初五，初五迎财神啦！迎财神是我国汉族民间春节时的古老习俗，汉族民间传说正月初五是财神的生日，也被认为是财神节
首先画一个可以晃动的财神帽，都是通过改变div的形状组合而成的， 画好后可以在帽子下面加一个图片，还是我之前用的那只小老虎，就可以给小老虎戴上帽子啦
<div class="cap_wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="three_left"></div>
<div class="three_circle">财</div>
<div class="three_right"></div>
</div>
<div class="four">
<div class="line_left"></div>
<div class="circle_left"><div class="rhombus"></div></div>
<div class="line_right"></div>
<div class="circle_right"><div class="rhombus"></div></div>
</div>
<!-- <img class="huhu" src="./static/img/huhu.png" alt=""> -->
</div>
帽子和整体布局的css代码， z-index提高帽子的堆叠顺序,不被小老虎图片覆盖。 对帽子左右两边的晃动进行动画 slideshow和slideshow2
body{
background-color: #BC372E;
}
#app{
width: 100%;
height: 500px;
}
.cap_wrap{
width: 500px;
margin: 100px auto;
position: relative;
z-index: 10;
}
.one{
width: 50px;
height: 25px;
background-color: #BC372E;
margin: 0 auto;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-radius: 35px 35px 0 0 ;
}
.two{
width: 100px;
height: 28px;
background-color: #BC372E;
margin: 0 auto;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-radius: 22px 22px 0 0 ;
}
.three{
width: 120px;
height: 4px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.three_left, .three_right{
margin-top: -5px;
width: 60px;
height: 4px;
background-color: yellow;
border: 2px solid #000;
border-radius: 13% 0% 0 0/60% 60% 0 0;
transform: rotate(-5deg);
}
.three_right{
border-radius: 0% 13% 0 0/60% 60% 0 0;
transform: rotate(5deg);
}
// 绘制中间的那个‘财’字
.three_circle{
position: absolute;
z-index: 10;
margin-top: -8px;
width: 20px;
height: 15px;
background-color: yellow;
border-radius: 50%;
border: 2px solid #000;
font-size: 12px;
text-align: center;
line-height: 12px;
color: #BC372E;
font-weight: bolder;
}
// 帽子左右两边那个黄色的连接线，是用border绘制的，伪造弯曲的线段
.line_left, .line_right{
width: 40px;
height: 5px;
border: 3px solid yellow;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
border-top: none;
position: absolute;
left: 155px;
top: 36px;
transform: rotate(6deg);
}
.line_right{
border-top: none;
left: 299.5px;
transform: rotate(-6deg);
}
// 绘制帽子旁边晃动的两个圆，中间放一个rhombus，正方形旋转一下，做那个类似钱币的图案
.circle_left, .circle_right{
width: 50px;
height: 50px;
background-color: #BC372E;
border: 1.2px solid #000;
border-radius: 50%;
position: absolute;
left: 110.5px;
top: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.circle_right{
margin-left: 230.5px;
}
.rhombus{
width: 20px;
height: 20px;
transform: rotate(45deg);
border: 2px solid yellow;
}
.line_left, .circle_left{
transform-origin: right center;
animation: slideshow 1s infinite ;
}
.line_right, .circle_right{
transform-origin: left center;
animation: slideshow2 1s infinite ;
}
@keyframes slideshow {
0%{ transform: rotate(30deg); }
50%{ transform: rotate(-15deg);}
100%{ transform: rotate(30deg); }
}
@keyframes slideshow2 {
0%{ transform: rotate(-30deg); }
50%{ transform: rotate(15deg);}
100%{ transform: rotate(-30deg); }
}
// 改变小老虎图片大小和位置
.huhu{
position: absolute;
width: 300px;
height: 300px;
top: -30px;
left: 90px;
}
接下来就是下坠的金元宝了，金元宝的图片是在网上直接下载的。我们使用的是vue，直接用 v-for显示多个金元宝，使用 Math.random() 改变金元宝的位置（marginLeft）和每个金元宝延迟下落的秒数（animation）。这里注意一定要将margin-left改成驼峰式才可以生效。
<div class="yuanbao_box" v-for="count in 20">
<img class="yuanbao" :style="{ marginLeft: Math.random()*1150+2 +'px', animation: 'drops 2s ease-in ' + Math.random()+2 + 's infinite'}" src="./static/img/元宝.png" alt="">
</div>
.yuanbao_box{
margin-top: -90px;
}
//改变元宝图片的大小
.yuanbao{
width: 70px;
height: 70px;
}
// 下落的动画
@keyframes drops{
from{opacity: 0;}
20%{opacity: 1;}
90%{opacity: 1;}
to{opacity: 0;transform: translateY(600px)}
}
最后祝大家新的一年财源广进，大吉大利，收入创新高！💰️💰️💰️
