• uni-app 小宠物 - 会说话的小鸟

    在 template 中

    1. <view class="container">
    2.   <view class="external-shape">
    3.     <view class="face-box">
    4.       <view class="eye-box eye-left">
    5.         <view class="eyeball-box eyeball-left">
    6.           <span class="pupil-box"><span class="pupil-reflex">span>span>
    7.         view>
    8.       view>
    9.       <view class="eye-box eye-right">
    10.         <view class="eyeball-box eyeball-right">
    11.           <span class="pupil-box"><span class="pupil-reflex">span>span>
    12.         view>
    13.       view>
    14.       <view class="nose-box">
    15.         <view class="nostril-tip">view>
    16.         <view class="nostril-tip">view>
    17.       view>
    18.       <view class="mouth-box">
    19.         <view class="upper-teeth">view>
    20.         <view class="lower-teeth">view>
    21.       view>
    22.     view>
    23.   view>
    24. view>

    在 style 中

    1. .container {
    2.   $overall: #0097d9; // 整体背景
    3.   // 眼睛部分
    4.   $eyeBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 眼睛部分的阴影
    5.   $eyeLeftBg: linear-gradient(to bottom, #fdfdfd, #c3efea); // 左眼背景
    6.   $eyeRightBg: linear-gradient(to bottom, #fdfdfd, #e6d6f6); // 右眼背景
    7.   // 眼球部分
    8.   $eyeballLeftBg: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%); // 左眼球背景
    9.   $eyeballRightBg: linear-gradient(135deg, #f1a183, #8535cd); // 右眼球背景
    10.   // 瞳孔部分
    11.   $pupilBg: #2c2f32; // 瞳孔部分的背景
    12.   $pupilBoxShadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.2); // 瞳孔部分的阴影
    13.   $pupilReflexBg: #ebebeb; // 瞳孔反射部分的背景
    14.   $pupilReflexBoxShadow: 20rpx 20rpx 20rpx rgba(255, 255, 255, 0.2); // 瞳孔反射部分的阴影
    15.   // 鼻子部分
    16.   $nostrilBg: rgba(0, 0, 0, 0.5); // 鼻孔的背景
    17.   $nostrilBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.1); // 鼻孔的阴影
    18.   // 嘴巴部分
    19.   $mouthBg: #810332; // 嘴巴背景
    20.   $mouthBorder: 50rpx solid #ffc333; // 嘴巴的边框
    21.   $mouthBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 嘴巴的阴影
    22.   $mouthBeforeBg: #400018; // 嘴巴内背景(在元素的内容前面插入新内容)[伪元素]
    23.   $mouthAfterBg: #dc1b50; // 嘴巴内舌头(在元素的内容之后插入新内容)[伪元素]
    24.   $upperBg: #fff; // 牙齿背景
    25.   position: fixed;
    26.   top: -70rpx;
    27.   right: -150rpx;
    28.   transform: scale(0.24);
    29.   -o-transform: scale(0.24); // Opera
    30.   -ms-transform: scale(0.24); // IE 9
    31.   -moz-transform: scale(0.24); // Firefox
    32.   -webkit-transform: scale(0.24); // Safari 和 Chrome
    33.   z-index: 9999;
    34.   .external-shape {
    35.     display: flex;
    36.     justify-content: center;
    37.     position: relative;
    38.     width: 340rpx;
    39.     height: 800rpx;
    40.     border-top-left-radius: 400rpx;
    41.     border-top-right-radius: 400rpx;
    42.     background-color: $overall;
    43.     box-shadow: 40rpx 40rpx 120rpx $overall;
    44.     transform: rotate(-50deg);
    45.     -o-transform: rotate(-50deg); // Opera
    46.     -ms-transform: rotate(-50deg); // IE 9
    47.     -moz-transform: rotate(-50deg); // Firefox
    48.     -webkit-transform: rotate(-50deg); // Safari 和 Chrome
    49.   }
    50.   .face-box {
    51.     display: flex;
    52.     align-items: center;
    53.     justify-content: center;
    54.     flex-direction: column;
    55.     position: absolute;
    56.     top: 14%;
    57.     width: 75%;
    58.     height: 320rpx;
    59.   }
    60.   // 眼睛部分
    61.   .eye-box {
    62.     position: absolute;
    63.     top: -10%;
    64.     width: 130rpx;
    65.     height: 130rpx;
    66.     margin: 6rpx;
    67.     background: #fff;
    68.     transform: translateX(-50%);
    69.     -o-transform: translateX(-50%); // Opera
    70.     -ms-transform: translateX(-50%); // IE 9
    71.     -moz-transform: translateX(-50%); // Firefox
    72.     -webkit-transform: translateX(-50%); // Safari 和 Chrome
    73.     box-shadow: $eyeBoxShadow;
    74.     border-radius: 100%;
    75.     // 眼球部分
    76.     .eyeball-box {
    77.       position: absolute;
    78.       top: 25%;
    79.       left: 50%;
    80.       width: 55%;
    81.       height: 55%;
    82.       transform: translate(-50%);
    83.       -o-transform: translate(-50%); // Opera
    84.       -ms-transform: translate(-50%); // IE 9
    85.       -moz-transform: translate(-50%); // Firefox
    86.       -webkit-transform: translate(-50%); // Safari 和 Chrome
    87.       border-radius: 100%;
    88.       z-index: 100;
    89.       // 瞳孔部分
    90.       .pupil-box {
    91.         position: absolute;
    92.         top: 25%;
    93.         left: 50%;
    94.         width: 55%;
    95.         height: 55%;
    96.         background: $pupilBg;
    97.         transform: translate(-50%);
    98.         -o-transform: translate(-50%); // Opera
    99.         -ms-transform: translate(-50%); // IE 9
    100.         -moz-transform: translate(-50%); // Firefox
    101.         -webkit-transform: translate(-50%); // Safari 和 Chrome
    102.         box-shadow: $pupilBoxShadow;
    103.         border-radius: 100%;
    104.         .pupil-reflex {
    105.           position: absolute;
    106.           top: 10%;
    107.           left: 25%;
    108.           width: 14rpx;
    109.           height: 14rpx;
    110.           background: $pupilReflexBg;
    111.           transform: translate(-50%);
    112.           -o-transform: translate(-50%); // Opera
    113.           -ms-transform: translate(-50%); // IE 9
    114.           -moz-transform: translate(-50%); // Firefox
    115.           -webkit-transform: translate(-50%); // Safari 和 Chrome
    116.           box-shadow: $pupilReflexBoxShadow;
    117.           border-radius: 100%;
    118.         }
    119.       }
    120.     }
    121.     // 左眼球
    122.     .eyeball-left {
    123.       background: $eyeballLeftBg;
    124.     }
    125.     // 右眼球
    126.     .eyeball-right {
    127.       background: $eyeballRightBg;
    128.     }
    129.   }
    130.   .eye-left {
    131.     // 左眼
    132.     left: 10%;
    133.     background: $eyeLeftBg;
    134.   }
    135.   .eye-right {
    136.     // 右眼
    137.     left: 85%;
    138.     background: $eyeRightBg;
    139.   }
    140.   // 鼻子部分
    141.   .nose-box {
    142.     top: 50%;
    143.     display: flex;
    144.     justify-content: space-between;
    145.     width: 28%;
    146.     height: auto;
    147.     margin-bottom: 20rpx;
    148.     .nostril-tip {
    149.       width: 16rpx;
    150.       height: 24rpx;
    151.       background: $nostrilBg;
    152.       box-shadow: $nostrilBoxShadow;
    153.       border-radius: 40rpx;
    154.     }
    155.   }
    156.   // 嘴巴部分
    157.   .mouth-box {
    158.     display: flex;
    159.     align-items: center;
    160.     justify-content: center;
    161.     position: relative;
    162.     width: 100%;
    163.     height: 0%;
    164.     overflow: hidden;
    165.     background-color: $mouthBg;
    166.     animation: mouth-animate 1.75s infinite;
    167.     border: $mouthBorder;
    168.     box-shadow: $mouthBoxShadow;
    169.     box-sizing: border-box;
    170.     border-radius: 200rpx;
    171.     // 上牙齿
    172.     .upper-teeth {
    173.       position: absolute;
    174.       top: -60rpx;
    175.       width: 340rpx;
    176.       height: 60rpx;
    177.       background-color: $upperBg;
    178.       animation: upper-teeth-animate 1.75s infinite;
    179.       border-bottom-left-radius: 20rpx;
    180.       border-bottom-right-radius: 20rpx;
    181.       z-index: 100;
    182.     }
    183.     // 下牙齿
    184.     .lower-teeth {
    185.       position: absolute;
    186.       bottom: 0;
    187.       width: 200rpx;
    188.       height: 60rpx;
    189.       background-color: $upperBg;
    190.       animation: lower-teeth-animate 1.75s infinite;
    191.       border-top-left-radius: 20rpx;
    192.       border-top-right-radius: 20rpx;
    193.       z-index: 100;
    194.     }
    195.   }
    196.   .mouth-box::before {
    197.     content: "";
    198.     position: absolute;
    199.     width: 300rpx;
    200.     height: 160rpx;
    201.     background-color: $mouthBeforeBg;
    202.     border-radius: 200rpx;
    203.   }
    204.   .mouth-box::after {
    205.     content: "";
    206.     position: absolute;
    207.     bottom: -160rpx;
    208.     width: 320rpx;
    209.     height: 160rpx;
    210.     background-color: $mouthAfterBg;
    211.     border-top-left-radius: 50%;
    212.     border-top-right-radius: 50%;
    213.     animation: mouth-after-animate 1.75s infinite;
    214.   }
    215.   // 动画部分
    216.   @keyframes upper-teeth-animate {
    217.     0%,
    218.     10%,
    219.     80%,
    220.     100% {
    221.       top: -60rpx;
    222.     }
    223.     20% {
    224.       top: 0rpx;
    225.     }
    226.     30% {
    227.       top: -40rpx;
    228.     }
    229.     40% {
    230.       top: -0rpx;
    231.     }
    232.     50% {
    233.       top: -50rpx;
    234.     }
    235.     70% {
    236.       top: 0rpx;
    237.     }
    238.   }
    239.   @keyframes lower-teeth-animate {
    240.     0%,
    241.     10%,
    242.     80%,
    243.     100% {
    244.       bottom: -60rpx;
    245.     }
    246.     20% {
    247.       bottom: 0rpx;
    248.     }
    249.     30% {
    250.       bottom: -40rpx;
    251.     }
    252.     40% {
    253.       bottom: -0rpx;
    254.     }
    255.     50% {
    256.       bottom: -50rpx;
    257.     }
    258.     70% {
    259.       bottom: 0rpx;
    260.     }
    261.   }
    262.   @keyframes mouth-animate {
    263.     0%,
    264.     10%,
    265.     100% {
    266.       width: 100%;
    267.       height: 0%;
    268.     }
    269.     15% {
    270.       width: 90%;
    271.       height: 30%;
    272.     }
    273.     20% {
    274.       width: 50%;
    275.       height: 70%;
    276.     }
    277.     25% {
    278.       width: 70%;
    279.       height: 70%;
    280.     }
    281.     30% {
    282.       width: 80%;
    283.       height: 60%;
    284.     }
    285.     35% {
    286.       width: 60%;
    287.       height: 70%;
    288.     }
    289.     40% {
    290.       width: 55%;
    291.       height: 75%;
    292.     }
    293.     45% {
    294.       width: 50%;
    295.       height: 90%;
    296.     }
    297.     50% {
    298.       width: 40%;
    299.       height: 70%;
    300.     }
    301.     55% {
    302.       width: 70%;
    303.       height: 95%;
    304.     }
    305.     60% {
    306.       width: 40%;
    307.       height: 50%;
    308.     }
    309.     65% {
    310.       width: 100%;
    311.       height: 60%;
    312.     }
    313.     70% {
    314.       width: 100%;
    315.       height: 70%;
    316.     }
    317.     75% {
    318.       width: 90%;
    319.       height: 70%;
    320.     }
    321.     80% {
    322.       width: 50%;
    323.       height: 70%;
    324.     }
    325.     85% {
    326.       width: 90%;
    327.       height: 50%;
    328.     }
    329.     85% {
    330.       width: 40%;
    331.       height: 70%;
    332.     }
    333.     90% {
    334.       width: 90%;
    335.       height: 30%;
    336.     }
    337.     95% {
    338.       width: 100%;
    339.       height: 10%;
    340.     }
    341.   }
    342.   @keyframes mouth-after-animate {
    343.     0%,
    344.     20%,
    345.     100% {
    346.       bottom: -160rpx;
    347.     }
    348.     30%,
    349.     90% {
    350.       bottom: -80rpx;
    351.     }
    352.     40% {
    353.       bottom: -90rpx;
    354.     }
    355.     50% {
    356.       bottom: -100rpx;
    357.     }
    358.     70% {
    359.       bottom: -160rpx;
    360.     }
    361.     90% {
    362.       bottom: -80rpx;
    363.     }
    364.   }
    365. }

    完整源码

    2. <template>
    3.   <view>
    4.     <view class="container">
    5.       <view class="external-shape">
    6.         <view class="face-box">
    7.           <view class="eye-box eye-left">
    8.             <view class="eyeball-box eyeball-left">
    9.               <span class="pupil-box"><span class="pupil-reflex">span>span>
    10.             view>
    11.           view>
    12.           <view class="eye-box eye-right">
    13.             <view class="eyeball-box eyeball-right">
    14.               <span class="pupil-box"><span class="pupil-reflex">span>span>
    15.             view>
    16.           view>
    17.           <view class="nose-box">
    18.             <view class="nostril-tip">view>
    19.             <view class="nostril-tip">view>
    20.           view>
    21.           <view class="mouth-box">
    22.             <view class="upper-teeth">view>
    23.             <view class="lower-teeth">view>
    24.           view>
    25.         view>
    26.       view>
    27.     view>
    28.   view>
    29. template>
    30.  
    31. <script>
    32. export default {
    33.   data() {
    34.     return {};
    35.   },
    36.   onLoad() {},
    37.   methods: {}
    38. };
    39. script>
    40.  
    41. <style lang="scss" scoped>
    42. .container {
    43.   $overall: #0097d9; // 整体背景
    44.   // 眼睛部分
    45.   $eyeBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 眼睛部分的阴影
    46.   $eyeLeftBg: linear-gradient(to bottom, #fdfdfd, #c3efea); // 左眼背景
    47.   $eyeRightBg: linear-gradient(to bottom, #fdfdfd, #e6d6f6); // 右眼背景
    48.   // 眼球部分
    49.   $eyeballLeftBg: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%); // 左眼球背景
    50.   $eyeballRightBg: linear-gradient(135deg, #f1a183, #8535cd); // 右眼球背景
    51.   // 瞳孔部分
    52.   $pupilBg: #2c2f32; // 瞳孔部分的背景
    53.   $pupilBoxShadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.2); // 瞳孔部分的阴影
    54.   $pupilReflexBg: #ebebeb; // 瞳孔反射部分的背景
    55.   $pupilReflexBoxShadow: 20rpx 20rpx 20rpx rgba(255, 255, 255, 0.2); // 瞳孔反射部分的阴影
    56.   // 鼻子部分
    57.   $nostrilBg: rgba(0, 0, 0, 0.5); // 鼻孔的背景
    58.   $nostrilBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.1); // 鼻孔的阴影
    59.   // 嘴巴部分
    60.   $mouthBg: #810332; // 嘴巴背景
    61.   $mouthBorder: 50rpx solid #ffc333; // 嘴巴的边框
    62.   $mouthBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 嘴巴的阴影
    63.   $mouthBeforeBg: #400018; // 嘴巴内背景(在元素的内容前面插入新内容)[伪元素]
    64.   $mouthAfterBg: #dc1b50; // 嘴巴内舌头(在元素的内容之后插入新内容)[伪元素]
    65.   $upperBg: #fff; // 牙齿背景
    66.   position: fixed;
    67.   top: -70rpx;
    68.   right: -150rpx;
    69.   transform: scale(0.24);
    70.   -o-transform: scale(0.24); // Opera
    71.   -ms-transform: scale(0.24); // IE 9
    72.   -moz-transform: scale(0.24); // Firefox
    73.   -webkit-transform: scale(0.24); // Safari 和 Chrome
    74.   z-index: 9999;
    75.   .external-shape {
    76.     display: flex;
    77.     justify-content: center;
    78.     position: relative;
    79.     width: 340rpx;
    80.     height: 800rpx;
    81.     border-top-left-radius: 400rpx;
    82.     border-top-right-radius: 400rpx;
    83.     background-color: $overall;
    84.     box-shadow: 40rpx 40rpx 120rpx $overall;
    85.     transform: rotate(-50deg);
    86.     -o-transform: rotate(-50deg); // Opera
    87.     -ms-transform: rotate(-50deg); // IE 9
    88.     -moz-transform: rotate(-50deg); // Firefox
    89.     -webkit-transform: rotate(-50deg); // Safari 和 Chrome
    90.   }
    91.   .face-box {
    92.     display: flex;
    93.     align-items: center;
    94.     justify-content: center;
    95.     flex-direction: column;
    96.     position: absolute;
    97.     top: 14%;
    98.     width: 75%;
    99.     height: 320rpx;
    100.   }
    101.   // 眼睛部分
    102.   .eye-box {
    103.     position: absolute;
    104.     top: -10%;
    105.     width: 130rpx;
    106.     height: 130rpx;
    107.     margin: 6rpx;
    108.     background: #fff;
    109.     transform: translateX(-50%);
    110.     -o-transform: translateX(-50%); // Opera
    111.     -ms-transform: translateX(-50%); // IE 9
    112.     -moz-transform: translateX(-50%); // Firefox
    113.     -webkit-transform: translateX(-50%); // Safari 和 Chrome
    114.     box-shadow: $eyeBoxShadow;
    115.     border-radius: 100%;
    116.     // 眼球部分
    117.     .eyeball-box {
    118.       position: absolute;
    119.       top: 25%;
    120.       left: 50%;
    121.       width: 55%;
    122.       height: 55%;
    123.       transform: translate(-50%);
    124.       -o-transform: translate(-50%); // Opera
    125.       -ms-transform: translate(-50%); // IE 9
    126.       -moz-transform: translate(-50%); // Firefox
    127.       -webkit-transform: translate(-50%); // Safari 和 Chrome
    128.       border-radius: 100%;
    129.       z-index: 100;
    130.       // 瞳孔部分
    131.       .pupil-box {
    132.         position: absolute;
    133.         top: 25%;
    134.         left: 50%;
    135.         width: 55%;
    136.         height: 55%;
    137.         background: $pupilBg;
    138.         transform: translate(-50%);
    139.         -o-transform: translate(-50%); // Opera
    140.         -ms-transform: translate(-50%); // IE 9
    141.         -moz-transform: translate(-50%); // Firefox
    142.         -webkit-transform: translate(-50%); // Safari 和 Chrome
    143.         box-shadow: $pupilBoxShadow;
    144.         border-radius: 100%;
    145.         .pupil-reflex {
    146.           position: absolute;
    147.           top: 10%;
    148.           left: 25%;
    149.           width: 14rpx;
    150.           height: 14rpx;
    151.           background: $pupilReflexBg;
    152.           transform: translate(-50%);
    153.           -o-transform: translate(-50%); // Opera
    154.           -ms-transform: translate(-50%); // IE 9
    155.           -moz-transform: translate(-50%); // Firefox
    156.           -webkit-transform: translate(-50%); // Safari 和 Chrome
    157.           box-shadow: $pupilReflexBoxShadow;
    158.           border-radius: 100%;
    159.         }
    160.       }
    161.     }
    162.     // 左眼球
    163.     .eyeball-left {
    164.       background: $eyeballLeftBg;
    165.     }
    166.     // 右眼球
    167.     .eyeball-right {
    168.       background: $eyeballRightBg;
    169.     }
    170.   }
    171.   .eye-left {
    172.     // 左眼
    173.     left: 10%;
    174.     background: $eyeLeftBg;
    175.   }
    176.   .eye-right {
    177.     // 右眼
    178.     left: 85%;
    179.     background: $eyeRightBg;
    180.   }
    181.   // 鼻子部分
    182.   .nose-box {
    183.     top: 50%;
    184.     display: flex;
    185.     justify-content: space-between;
    186.     width: 28%;
    187.     height: auto;
    188.     margin-bottom: 20rpx;
    189.     .nostril-tip {
    190.       width: 16rpx;
    191.       height: 24rpx;
    192.       background: $nostrilBg;
    193.       box-shadow: $nostrilBoxShadow;
    194.       border-radius: 40rpx;
    195.     }
    196.   }
    197.   // 嘴巴部分
    198.   .mouth-box {
    199.     display: flex;
    200.     align-items: center;
    201.     justify-content: center;
    202.     position: relative;
    203.     width: 100%;
    204.     height: 0%;
    205.     overflow: hidden;
    206.     background-color: $mouthBg;
    207.     animation: mouth-animate 1.75s infinite;
    208.     border: $mouthBorder;
    209.     box-shadow: $mouthBoxShadow;
    210.     box-sizing: border-box;
    211.     border-radius: 200rpx;
    212.     // 上牙齿
    213.     .upper-teeth {
    214.       position: absolute;
    215.       top: -60rpx;
    216.       width: 340rpx;
    217.       height: 60rpx;
    218.       background-color: $upperBg;
    219.       animation: upper-teeth-animate 1.75s infinite;
    220.       border-bottom-left-radius: 20rpx;
    221.       border-bottom-right-radius: 20rpx;
    222.       z-index: 100;
    223.     }
    224.     // 下牙齿
    225.     .lower-teeth {
    226.       position: absolute;
    227.       bottom: 0;
    228.       width: 200rpx;
    229.       height: 60rpx;
    230.       background-color: $upperBg;
    231.       animation: lower-teeth-animate 1.75s infinite;
    232.       border-top-left-radius: 20rpx;
    233.       border-top-right-radius: 20rpx;
    234.       z-index: 100;
    235.     }
    236.   }
    237.   .mouth-box::before {
    238.     content: "";
    239.     position: absolute;
    240.     width: 300rpx;
    241.     height: 160rpx;
    242.     background-color: $mouthBeforeBg;
    243.     border-radius: 200rpx;
    244.   }
    245.   .mouth-box::after {
    246.     content: "";
    247.     position: absolute;
    248.     bottom: -160rpx;
    249.     width: 320rpx;
    250.     height: 160rpx;
    251.     background-color: $mouthAfterBg;
    252.     border-top-left-radius: 50%;
    253.     border-top-right-radius: 50%;
    254.     animation: mouth-after-animate 1.75s infinite;
    255.   }
    256.   // 动画部分
    257.   @keyframes upper-teeth-animate {
    258.     0%,
    259.     10%,
    260.     80%,
    261.     100% {
    262.       top: -60rpx;
    263.     }
    264.     20% {
    265.       top: 0rpx;
    266.     }
    267.     30% {
    268.       top: -40rpx;
    269.     }
    270.     40% {
    271.       top: -0rpx;
    272.     }
    273.     50% {
    274.       top: -50rpx;
    275.     }
    276.     70% {
    277.       top: 0rpx;
    278.     }
    279.   }
    280.   @keyframes lower-teeth-animate {
    281.     0%,
    282.     10%,
    283.     80%,
    284.     100% {
    285.       bottom: -60rpx;
    286.     }
    287.     20% {
    288.       bottom: 0rpx;
    289.     }
    290.     30% {
    291.       bottom: -40rpx;
    292.     }
    293.     40% {
    294.       bottom: -0rpx;
    295.     }
    296.     50% {
    297.       bottom: -50rpx;
    298.     }
    299.     70% {
    300.       bottom: 0rpx;
    301.     }
    302.   }
    303.   @keyframes mouth-animate {
    304.     0%,
    305.     10%,
    306.     100% {
    307.       width: 100%;
    308.       height: 0%;
    309.     }
    310.     15% {
    311.       width: 90%;
    312.       height: 30%;
    313.     }
    314.     20% {
    315.       width: 50%;
    316.       height: 70%;
    317.     }
    318.     25% {
    319.       width: 70%;
    320.       height: 70%;
    321.     }
    322.     30% {
    323.       width: 80%;
    324.       height: 60%;
    325.     }
    326.     35% {
    327.       width: 60%;
    328.       height: 70%;
    329.     }
    330.     40% {
    331.       width: 55%;
    332.       height: 75%;
    333.     }
    334.     45% {
    335.       width: 50%;
    336.       height: 90%;
    337.     }
    338.     50% {
    339.       width: 40%;
    340.       height: 70%;
    341.     }
    342.     55% {
    343.       width: 70%;
    344.       height: 95%;
    345.     }
    346.     60% {
    347.       width: 40%;
    348.       height: 50%;
    349.     }
    350.     65% {
    351.       width: 100%;
    352.       height: 60%;
    353.     }
    354.     70% {
    355.       width: 100%;
    356.       height: 70%;
    357.     }
    358.     75% {
    359.       width: 90%;
    360.       height: 70%;
    361.     }
    362.     80% {
    363.       width: 50%;
    364.       height: 70%;
    365.     }
    366.     85% {
    367.       width: 90%;
    368.       height: 50%;
    369.     }
    370.     85% {
    371.       width: 40%;
    372.       height: 70%;
    373.     }
    374.     90% {
    375.       width: 90%;
    376.       height: 30%;
    377.     }
    378.     95% {
    379.       width: 100%;
    380.       height: 10%;
    381.     }
    382.   }
    383.   @keyframes mouth-after-animate {
    384.     0%,
    385.     20%,
    386.     100% {
    387.       bottom: -160rpx;
    388.     }
    389.     30%,
    390.     90% {
    391.       bottom: -80rpx;
    392.     }
    393.     40% {
    394.       bottom: -90rpx;
    395.     }
    396.     50% {
    397.       bottom: -100rpx;
    398.     }
    399.     70% {
    400.       bottom: -160rpx;
    401.     }
    402.     90% {
    403.       bottom: -80rpx;
    404.     }
    405.   }
    406. }
    407. style>

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

  • 相关阅读:
    Java中级——lambda表达式
    通过人才测评系统，对程序员岗位进行招聘测评
    注意力机制及代码实现
    环境配置 | 图文VS2022配置OpenCV，Dlib
    ClickHouse(10)ClickHouse合并树MergeTree家族表引擎之ReplacingMergeTree详细解析
    C 语言是“最环保”的编程语言
    2.5 贝叶斯分类器
    P1972 [SDOI2009] HH的项链
    sed的介绍及应用
    HttpClient遭遇Connection Reset异常分析（浅析部分源码）
  • 原文地址：https://blog.csdn.net/AdminGuan/article/details/133985805