先祝各位小伙伴圣誕快樂，寫一個圣誕動畫送給大家奔垦，寫的是小程序端的叠穆，大家可以自己改成web端少漆，由于素材的限制寫得比較簡陋，大家看看就好哈硼被；話不多說上源碼
wxml
<!--components/christmas/christmas.wxml-->
<view class="christmas_container" catchtouchmove="move" bindtap="onClick">
<view class="title">
<image src="cloud://frankieqi-9gur2q1x49d1ebbc.6672-frankieqi-9gur2q1x49d1ebbc-1304442932/happy.png"></image>
</view>
<view class="snow">
<view class="snow1"></view>
<view class="snow2"></view>
<view class="snow3"></view>
</view>
<view class="tree">
<view>
<text></text>
<text></text>
</view>
<view>
<text></text>
<text></text>
</view>
<view>
<text></text>
<text></text>
</view>
<view>
<text></text>
<text></text>
</view>
<view>
<text></text>
<text></text>
</view>
</view>
<view class="people">
<image src="cloud://frankieqi-9gur2q1x49d1ebbc.6672-frankieqi-9gur2q1x49d1ebbc-1304442932/chirsmes.png"></image>
</view>
</view>
wxss
/* components/christmas/christmas.wxss */
view text {
margin:0;
padding: 0;
box-sizing: border-box;
}
.christmas_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #001f00;
}
.christmas_container::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
height: 250rpx;
}
.tree {
position: relative;
bottom: 10rpx;
width: 400rpx;
height: 400rpx;
/* background: rgba(0,0,0,.1); */
}
.tree::before {
position: absolute;
content: "";
bottom: -300rpx;
left: 0;
width: 100%;
height: 100rpx;
border-radius: 50%;
background: rgba(0,0,0,.1);
}
.tree::after {
content: '';
position: absolute;
bottom: -240rpx;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 40rpx;
background: #734500;
}
.tree view {
position: absolute;
width: 100%;
height: 200rpx;
bottom: -200rpx;
display: flex;
}
.tree view:nth-child(2) {
transform: translateY(-100rpx) scale(0.8);
z-index: 1;
}
.tree view:nth-child(3) {
transform: translateY(-175rpx) scale(0.6);
z-index: 1;
}
.tree view:nth-child(4) {
transform: translateY(-240rpx) scale(0.4);
z-index: 1;
}
.tree view:nth-child(5) {
transform: translateY(-280rpx) scale(0.2);
z-index: 1;
}
.tree view text {
position: relative;
width: 50%;
height: 100%;
display: block;
overflow: hidden;
}
.tree view text:nth-child(1):before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(#00b300,#0f0);
border-top-left-radius: 110% 100%;
border-top-right-radius: 0% 100%;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}
.tree view text:nth-child(2):before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(#00b300,#0f0);
border-top-left-radius: 0% 100%;
border-top-right-radius: 110% 100%;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}
.snow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.snow .snow1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://uploadfile.huiyi8.com/2014/0227/20140227102820171.jpg');
z-index: 1000;
mix-blend-mode: screen;/*牛逼*/
animation: animate 2s linear infinite;
transform: scale(2);
}
.snow .snow2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://uploadfile.huiyi8.com/2014/0227/20140227102820171.jpg');
z-index: 1000;
mix-blend-mode: screen;/*牛逼*/
animation: animate 5s linear infinite;
transform: scale(1);
filter: blur(1rpx);
}
.snow .snow3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1888909580,1624588087&fm=26&gp=0.jpg');
z-index: 1000;
mix-blend-mode: screen;/*牛逼*/
animation: animate 5s linear infinite;
transform: scale(1.5);
}
.people image{
position: absolute;
bottom: 0;
left: 0;
width: 120rpx;
height: 120rpx;
animation: people 3s ease infinite;
}
@keyframes animate {
0%
{
background-position: 0 0;
}
50% {
background-position: 0 350rpx;
}
100% {
background-position: 0 700rpx;
}
}
@keyframes word {
0% {
opacity: 0;
}
50% {
opacity: .6;
}
75% {
opacity: 1;
}
100% {
opacity: .5;
}
}
@keyframes people {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
.title {
position: absolute;
top: 0rpx;
}
.title image{
width: 620rpx;
animation: word 3s linear infinite;
}
修改成web端
把view替換成div示损；把text替換成span；把rpx替換成px嚷硫；即可
素材：
