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

2022-10-08 219

版权

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

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

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

体验一下

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

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

前言

先看效果

画小鸟的身体部分

画小鸟眼睛部分

画小鸟的鼻子嘴巴

体验一下

热门文章

最新文章

相关课程

相关电子书

相关实验场景