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

蜡笔小心_
VIP.5 如鱼得水
4,189 阅读4分钟

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

前言

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

先看效果

1.gif

从效果图中可以看到，在小程序右侧有一只会说话的小鸟固定着，这个并不是一个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;
}
  • 这里把固定样式和小鸟样式分开了，避免产生冲突。

image.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);
}

image.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;
    }
}

1.gif

体验一下

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

avatar
文章
阅读
粉丝