前言
本篇文章是用uniapp开发的，由于uniapp和原生微信小程序并没有什么差别，所以可以直接改改换成原生的代码哦。
先看效果
从效果图中可以看到，在小程序右侧有一只会说话的小鸟固定着，这个并不是一个GIF图片，而且采用CSS画上去的，并加上动画效果。
画小鸟的身体部分
<view class="dong">
<view class="monster">
</view></view>.dong { z-index: 9999; position: fixed; top: -40px; right: -80px; transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}.monster { transform: rotate(-50deg);
-ms-transform: rotate(-50deg); /* IE 9 */
-moz-transform: rotate(-50deg); /* Firefox */
-webkit-transform: rotate(-50deg); /* Safari 和 Chrome */
-o-transform: rotate(-50deg); /* Opera */
display: flex; justify-content: center; position: relative; width: 170px; height: 400px; border-top-left-radius: 200px; border-top-right-radius: 200px; background-color: #0097D9; box-shadow: 20px 20px 60px #0096D8;
}-
这里把固定样式和小鸟样式分开了，避免产生冲突。
画小鸟眼睛部分
眼睛是两个，所以是存在一个布局样式的，所以又给小鸟套了一层 face 的样式，当做它的面部结构
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
</view></view>.monster__face { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 14%; width: 75%; height: 160px;
}.avatar-eye { position: absolute; top: -10%; width: 65px; height: 65px; background: linear-gradient(105deg, white, #cb87f4); border-radius: 100%; box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2); margin: 3px;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
}.avatar-eye--green { background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}.avatar-eye--violet { background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}.eye--left { left: 10%;
}.eye--right { left: 85%;
}.eye--center { left: 45%; top: 10%;
}.avatar-eye-pupil { position: absolute; width: 55%; height: 55%; left: 50%; top: 25%;
-webkit-transform: translate(-50%); transform: translate(-50%); z-index: 100; border-radius: 100%;
}.pupil--green { background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}.pupil--pink { background: linear-gradient(135deg, #f1a183, #8535cd);
}.avatar-eye-pupil-blackThing { position: absolute; width: 55%; height: 55%; left: 50%; top: 25%; background: #2c2f32;
-webkit-transform: translate(-50%); transform: translate(-50%); border-radius: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}.avatar-eye-pupil-lightReflection { position: absolute; width: 7px; height: 7px; left: 25%; top: 10%; background: #ebebeb;
-webkit-transform: translate(-50%); transform: translate(-50%); border-radius: 100%; box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
画小鸟的鼻子嘴巴
这里是最关键的部分，需要处理整个小鸟的动画效果了。
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view></view><view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view></view>.monster__noses { top: 50%; display: flex; justify-content: space-between; width: 28%; height: auto; margin-bottom: 10px;
}.monster__nose { width: 8px; height: 12px; border-radius: 20px; background: rgba(0, 0, 0, 0.5); box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}.monster__mouth { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 0%; overflow: hidden; border: 25px solid #FFC333; border-radius: 100px; background-color: #810332; animation: mouth 1.75s infinite; box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box;
}.monster__mouth::before { content: ''; position: absolute; width: 150px; height: 80px; border-radius: 100px; background-color: #400018;
}.monster__mouth::after { content: ''; position: absolute; bottom: -80px; width: 160px; height: 80px; border-top-left-radius: 50%; border-top-right-radius: 50%; background-color: #DC1B50; animation: tongue 1.75s infinite;
}.monster__top { position: absolute; top: -30px; width: 170px; height: 30px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #ffffff; z-index: 100; animation: t 1.75s infinite;
}.monster__bottom { position: absolute; bottom: 0; width: 100px; height: 30px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #ffffff; z-index: 100; animation: b 1.75s infinite;
}-
让小鸟动起来
@keyframes t { 0%, 10%, 80%, 100% { top: -30px;
} 20% { top: 0px;
} 30% { top: -20px;
} 40% { top: -0px;
} 50% { top: -25px;
} 70% { top: 0px;
}
}@keyframes b { 0%, 10%, 80%, 100% { bottom: -30px;
} 20% { bottom: 0px;
} 30% { bottom: -20px;
} 40% { bottom: -0px;
} 50% { bottom: -25px;
} 70% { bottom: 0px;
}
}@keyframes mouth { 0%, 10%, 100% { width: 100%; height: 0%;
} 15% { width: 90%; height: 30%;
} 20% { width: 50%; height: 70%;
} 25% { width: 70%; height: 70%;
} 30% { width: 80%; height: 60%;
} 35% { width: 60%; height: 70%;
} 40% { width: 55%; height: 75%;
} 45% { width: 50%; height: 90%;
} 50% { width: 40%; height: 70%;
} 55% { width: 70%; height: 95%;
} 60% { width: 40%; height: 50%;
} 65% { width: 100%; height: 60%;
} 70% { width: 100%; height: 70%;
} 75% { width: 90%; height: 70%;
} 80% { width: 50%; height: 70%;
} 85% { width: 90%; height: 50%;
} 85% { width: 40%; height: 70%;
} 90% { width: 90%; height: 30%;
} 95% { width: 100%; height: 10%;
}
}@keyframes tongue { 0%, 20%, 100% { bottom: -80px;
} 30%, 90% { bottom: -40px;
} 40% { bottom: -45px;
} 50% { bottom: -50px;
} 70% { bottom: -80px;
} 90% { bottom: -40px;
}
}体验一下
由于摇一摇和震动无法体现在文章中，所以大家可以关注我的公众号猿来是前端底部栏有小程序菜单，亦可以直接在微信中搜索小程序嗒嗒吃喝玩乐小工具体验哦。
原文始发于微信公众号（猿来是前端）：【会说话的小鸟】给你的微信小程序加一个宠物吧！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/250236.html
