【会说话的小鸟】给你的微信小程序加一个宠物吧！

2022-10-08 243

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【会说话的小鸟】给你的微信小程序加一个宠物吧！

FNXXVBMWW``79D6T4]M%EGH.png

前言

本篇文章是用uniapp开发的，由于uniapp和原生微信小程序并没有什么差别，所以可以直接改改换成原生的代码哦。

先看效果

RNH($)UZDW951NLS`HI7~]7.png

从效果图中可以看到，在小程序右侧有一只会说话的小鸟固定着，这个并不是一个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;
}
复制代码

这里把固定样式和小鸟样式分开了，避免产生冲突。

$LTI3LD_N{8%BZT[W4SYM{)6.png$

画小鸟眼睛部分

眼睛是两个，所以是存在一个布局样式的，所以又给小鸟套了一层 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);
}
复制代码

@0`CZ2XJE9$6Q}(5V8GK}QW.png

画小鸟的鼻子嘴巴

这里是最关键的部分，需要处理整个小鸟的动画效果了。

<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;
    }
}
复制代码

X6V2DV{J9@L`{814RTPF(A8.png

体验一下

由于摇一摇和震动无法体现在文章中，所以大家可以关注我的公众号猿来是前端底部栏有小程序菜单，亦可以直接在微信中搜索小程序嗒嗒吃喝玩乐小工具体验哦。

【会说话的小鸟】给你的微信小程序加一个宠物吧！

前言

先看效果

画小鸟的身体部分

画小鸟眼睛部分

画小鸟的鼻子嘴巴

体验一下

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【会说话的小鸟】给你的微信小程序加一个宠物吧！

前言

先看效果

画小鸟的身体部分

画小鸟眼睛部分

画小鸟的鼻子嘴巴

体验一下

热门文章

最新文章

相关课程

相关电子书

相关实验场景