提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  APP

当前栏目

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

2023-02-18 16:32:26 时间

前言

本篇文章是用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;
    }
}

相关文章