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

在 template 中

<view class="container"><view class="external-shape"><view class="face-box"><view class="eye-box eye-left"><view class="eyeball-box eyeball-left"><span class="pupil-box"><span class="pupil-reflex"></span></span></view></view><view class="eye-box eye-right"><view class="eyeball-box eyeball-right"><span class="pupil-box"><span class="pupil-reflex"></span></span></view></view><view class="nose-box"><view class="nostril-tip"></view><view class="nostril-tip"></view></view><view class="mouth-box"><view class="upper-teeth"></view><view class="lower-teeth"></view></view></view></view>
</view>

在 style 中

.container {$overall: #0097d9; // 整体背景// 眼睛部分$eyeBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 眼睛部分的阴影$eyeLeftBg: linear-gradient(to bottom, #fdfdfd, #c3efea); // 左眼背景$eyeRightBg: linear-gradient(to bottom, #fdfdfd, #e6d6f6); // 右眼背景// 眼球部分$eyeballLeftBg: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%); // 左眼球背景$eyeballRightBg: linear-gradient(135deg, #f1a183, #8535cd); // 右眼球背景// 瞳孔部分$pupilBg: #2c2f32; // 瞳孔部分的背景$pupilBoxShadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.2); // 瞳孔部分的阴影$pupilReflexBg: #ebebeb; // 瞳孔反射部分的背景$pupilReflexBoxShadow: 20rpx 20rpx 20rpx rgba(255, 255, 255, 0.2); // 瞳孔反射部分的阴影// 鼻子部分$nostrilBg: rgba(0, 0, 0, 0.5); // 鼻孔的背景$nostrilBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.1); // 鼻孔的阴影// 嘴巴部分$mouthBg: #810332; // 嘴巴背景$mouthBorder: 50rpx solid #ffc333; // 嘴巴的边框$mouthBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 嘴巴的阴影$mouthBeforeBg: #400018; // 嘴巴内背景(在元素的内容前面插入新内容)[伪元素]$mouthAfterBg: #dc1b50; // 嘴巴内舌头(在元素的内容之后插入新内容)[伪元素]$upperBg: #fff; // 牙齿背景position: fixed;top: -70rpx;right: -150rpx;transform: scale(0.24);-o-transform: scale(0.24); // Opera-ms-transform: scale(0.24); // IE 9-moz-transform: scale(0.24); // Firefox-webkit-transform: scale(0.24); // Safari 和 Chromez-index: 9999;.external-shape {display: flex;justify-content: center;position: relative;width: 340rpx;height: 800rpx;border-top-left-radius: 400rpx;border-top-right-radius: 400rpx;background-color: $overall;box-shadow: 40rpx 40rpx 120rpx $overall;transform: rotate(-50deg);-o-transform: rotate(-50deg); // Opera-ms-transform: rotate(-50deg); // IE 9-moz-transform: rotate(-50deg); // Firefox-webkit-transform: rotate(-50deg); // Safari 和 Chrome}.face-box {display: flex;align-items: center;justify-content: center;flex-direction: column;position: absolute;top: 14%;width: 75%;height: 320rpx;}// 眼睛部分.eye-box {position: absolute;top: -10%;width: 130rpx;height: 130rpx;margin: 6rpx;background: #fff;transform: translateX(-50%);-o-transform: translateX(-50%); // Opera-ms-transform: translateX(-50%); // IE 9-moz-transform: translateX(-50%); // Firefox-webkit-transform: translateX(-50%); // Safari 和 Chromebox-shadow: $eyeBoxShadow;border-radius: 100%;// 眼球部分.eyeball-box {position: absolute;top: 25%;left: 50%;width: 55%;height: 55%;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromeborder-radius: 100%;z-index: 100;// 瞳孔部分.pupil-box {position: absolute;top: 25%;left: 50%;width: 55%;height: 55%;background: $pupilBg;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromebox-shadow: $pupilBoxShadow;border-radius: 100%;.pupil-reflex {position: absolute;top: 10%;left: 25%;width: 14rpx;height: 14rpx;background: $pupilReflexBg;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromebox-shadow: $pupilReflexBoxShadow;border-radius: 100%;}}}// 左眼球.eyeball-left {background: $eyeballLeftBg;}// 右眼球.eyeball-right {background: $eyeballRightBg;}}.eye-left {// 左眼left: 10%;background: $eyeLeftBg;}.eye-right {// 右眼left: 85%;background: $eyeRightBg;}// 鼻子部分.nose-box {top: 50%;display: flex;justify-content: space-between;width: 28%;height: auto;margin-bottom: 20rpx;.nostril-tip {width: 16rpx;height: 24rpx;background: $nostrilBg;box-shadow: $nostrilBoxShadow;border-radius: 40rpx;}}// 嘴巴部分.mouth-box {display: flex;align-items: center;justify-content: center;position: relative;width: 100%;height: 0%;overflow: hidden;background-color: $mouthBg;animation: mouth-animate 1.75s infinite;border: $mouthBorder;box-shadow: $mouthBoxShadow;box-sizing: border-box;border-radius: 200rpx;// 上牙齿.upper-teeth {position: absolute;top: -60rpx;width: 340rpx;height: 60rpx;background-color: $upperBg;animation: upper-teeth-animate 1.75s infinite;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;z-index: 100;}// 下牙齿.lower-teeth {position: absolute;bottom: 0;width: 200rpx;height: 60rpx;background-color: $upperBg;animation: lower-teeth-animate 1.75s infinite;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;z-index: 100;}}.mouth-box::before {content: "";position: absolute;width: 300rpx;height: 160rpx;background-color: $mouthBeforeBg;border-radius: 200rpx;}.mouth-box::after {content: "";position: absolute;bottom: -160rpx;width: 320rpx;height: 160rpx;background-color: $mouthAfterBg;border-top-left-radius: 50%;border-top-right-radius: 50%;animation: mouth-after-animate 1.75s infinite;}// 动画部分@keyframes upper-teeth-animate {0%,10%,80%,100% {top: -60rpx;}20% {top: 0rpx;}30% {top: -40rpx;}40% {top: -0rpx;}50% {top: -50rpx;}70% {top: 0rpx;}}@keyframes lower-teeth-animate {0%,10%,80%,100% {bottom: -60rpx;}20% {bottom: 0rpx;}30% {bottom: -40rpx;}40% {bottom: -0rpx;}50% {bottom: -50rpx;}70% {bottom: 0rpx;}}@keyframes mouth-animate {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 mouth-after-animate {0%,20%,100% {bottom: -160rpx;}30%,90% {bottom: -80rpx;}40% {bottom: -90rpx;}50% {bottom: -100rpx;}70% {bottom: -160rpx;}90% {bottom: -80rpx;}}
}

完整源码

<!-- 会说话的小鸟 -->
<template><view><view class="container"><view class="external-shape"><view class="face-box"><view class="eye-box eye-left"><view class="eyeball-box eyeball-left"><span class="pupil-box"><span class="pupil-reflex"></span></span></view></view><view class="eye-box eye-right"><view class="eyeball-box eyeball-right"><span class="pupil-box"><span class="pupil-reflex"></span></span></view></view><view class="nose-box"><view class="nostril-tip"></view><view class="nostril-tip"></view></view><view class="mouth-box"><view class="upper-teeth"></view><view class="lower-teeth"></view></view></view></view></view></view>
</template><script>
export default {data() {return {};},onLoad() {},methods: {}
};
</script><style lang="scss" scoped>
.container {$overall: #0097d9; // 整体背景// 眼睛部分$eyeBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 眼睛部分的阴影$eyeLeftBg: linear-gradient(to bottom, #fdfdfd, #c3efea); // 左眼背景$eyeRightBg: linear-gradient(to bottom, #fdfdfd, #e6d6f6); // 右眼背景// 眼球部分$eyeballLeftBg: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%); // 左眼球背景$eyeballRightBg: linear-gradient(135deg, #f1a183, #8535cd); // 右眼球背景// 瞳孔部分$pupilBg: #2c2f32; // 瞳孔部分的背景$pupilBoxShadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.2); // 瞳孔部分的阴影$pupilReflexBg: #ebebeb; // 瞳孔反射部分的背景$pupilReflexBoxShadow: 20rpx 20rpx 20rpx rgba(255, 255, 255, 0.2); // 瞳孔反射部分的阴影// 鼻子部分$nostrilBg: rgba(0, 0, 0, 0.5); // 鼻孔的背景$nostrilBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.1); // 鼻孔的阴影// 嘴巴部分$mouthBg: #810332; // 嘴巴背景$mouthBorder: 50rpx solid #ffc333; // 嘴巴的边框$mouthBoxShadow: 8rpx 16rpx 10rpx rgba(0, 0, 0, 0.2); // 嘴巴的阴影$mouthBeforeBg: #400018; // 嘴巴内背景(在元素的内容前面插入新内容)[伪元素]$mouthAfterBg: #dc1b50; // 嘴巴内舌头(在元素的内容之后插入新内容)[伪元素]$upperBg: #fff; // 牙齿背景position: fixed;top: -70rpx;right: -150rpx;transform: scale(0.24);-o-transform: scale(0.24); // Opera-ms-transform: scale(0.24); // IE 9-moz-transform: scale(0.24); // Firefox-webkit-transform: scale(0.24); // Safari 和 Chromez-index: 9999;.external-shape {display: flex;justify-content: center;position: relative;width: 340rpx;height: 800rpx;border-top-left-radius: 400rpx;border-top-right-radius: 400rpx;background-color: $overall;box-shadow: 40rpx 40rpx 120rpx $overall;transform: rotate(-50deg);-o-transform: rotate(-50deg); // Opera-ms-transform: rotate(-50deg); // IE 9-moz-transform: rotate(-50deg); // Firefox-webkit-transform: rotate(-50deg); // Safari 和 Chrome}.face-box {display: flex;align-items: center;justify-content: center;flex-direction: column;position: absolute;top: 14%;width: 75%;height: 320rpx;}// 眼睛部分.eye-box {position: absolute;top: -10%;width: 130rpx;height: 130rpx;margin: 6rpx;background: #fff;transform: translateX(-50%);-o-transform: translateX(-50%); // Opera-ms-transform: translateX(-50%); // IE 9-moz-transform: translateX(-50%); // Firefox-webkit-transform: translateX(-50%); // Safari 和 Chromebox-shadow: $eyeBoxShadow;border-radius: 100%;// 眼球部分.eyeball-box {position: absolute;top: 25%;left: 50%;width: 55%;height: 55%;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromeborder-radius: 100%;z-index: 100;// 瞳孔部分.pupil-box {position: absolute;top: 25%;left: 50%;width: 55%;height: 55%;background: $pupilBg;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromebox-shadow: $pupilBoxShadow;border-radius: 100%;.pupil-reflex {position: absolute;top: 10%;left: 25%;width: 14rpx;height: 14rpx;background: $pupilReflexBg;transform: translate(-50%);-o-transform: translate(-50%); // Opera-ms-transform: translate(-50%); // IE 9-moz-transform: translate(-50%); // Firefox-webkit-transform: translate(-50%); // Safari 和 Chromebox-shadow: $pupilReflexBoxShadow;border-radius: 100%;}}}// 左眼球.eyeball-left {background: $eyeballLeftBg;}// 右眼球.eyeball-right {background: $eyeballRightBg;}}.eye-left {// 左眼left: 10%;background: $eyeLeftBg;}.eye-right {// 右眼left: 85%;background: $eyeRightBg;}// 鼻子部分.nose-box {top: 50%;display: flex;justify-content: space-between;width: 28%;height: auto;margin-bottom: 20rpx;.nostril-tip {width: 16rpx;height: 24rpx;background: $nostrilBg;box-shadow: $nostrilBoxShadow;border-radius: 40rpx;}}// 嘴巴部分.mouth-box {display: flex;align-items: center;justify-content: center;position: relative;width: 100%;height: 0%;overflow: hidden;background-color: $mouthBg;animation: mouth-animate 1.75s infinite;border: $mouthBorder;box-shadow: $mouthBoxShadow;box-sizing: border-box;border-radius: 200rpx;// 上牙齿.upper-teeth {position: absolute;top: -60rpx;width: 340rpx;height: 60rpx;background-color: $upperBg;animation: upper-teeth-animate 1.75s infinite;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;z-index: 100;}// 下牙齿.lower-teeth {position: absolute;bottom: 0;width: 200rpx;height: 60rpx;background-color: $upperBg;animation: lower-teeth-animate 1.75s infinite;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;z-index: 100;}}.mouth-box::before {content: "";position: absolute;width: 300rpx;height: 160rpx;background-color: $mouthBeforeBg;border-radius: 200rpx;}.mouth-box::after {content: "";position: absolute;bottom: -160rpx;width: 320rpx;height: 160rpx;background-color: $mouthAfterBg;border-top-left-radius: 50%;border-top-right-radius: 50%;animation: mouth-after-animate 1.75s infinite;}// 动画部分@keyframes upper-teeth-animate {0%,10%,80%,100% {top: -60rpx;}20% {top: 0rpx;}30% {top: -40rpx;}40% {top: -0rpx;}50% {top: -50rpx;}70% {top: 0rpx;}}@keyframes lower-teeth-animate {0%,10%,80%,100% {bottom: -60rpx;}20% {bottom: 0rpx;}30% {bottom: -40rpx;}40% {bottom: -0rpx;}50% {bottom: -50rpx;}70% {bottom: 0rpx;}}@keyframes mouth-animate {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 mouth-after-animate {0%,20%,100% {bottom: -160rpx;}30%,90% {bottom: -80rpx;}40% {bottom: -90rpx;}50% {bottom: -100rpx;}70% {bottom: -160rpx;}90% {bottom: -80rpx;}}
}
</style>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/170405.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适合在虚拟化环境中部署 Kubernetes 的三个场景

在《虚拟化 vs. 裸金属&#xff1a;K8s 部署环境架构与特性对比》文章中&#xff0c;我们从架构和特性的角度&#xff0c;对比了在虚拟化和裸金属环境部署 Kubernetes 的优劣势&#xff0c;并在文末列举了两者更适合的应用场景。本文&#xff0c;我们将聚焦以虚拟化环境支持 K8…

ubuntu20.04下安装nc

前言 nc在网络渗透测试中非常好用&#xff0c;这里的主要记一下Ubuntu20.04中nc的安装 编译安装 第一种方式是自己编译安装&#xff0c;先下载安装包 nc.zip wget http://sourceforge.net/projects/netcat/files/netcat/0.7.1/netcat-0.7.1.tar.gz/download -O netcat-0.7.…

线性代数-Python-03:矩阵的变换 - 手写Matrix Transformation及numpy中的用法

文章目录 一、代码仓库二、旋转矩阵的推导及图形学中的矩阵变换2.1 让横坐标扩大a倍&#xff0c;纵坐标扩大b倍2.2 关于x轴翻转2.3 关于y轴翻转2.4 关于原点翻转&#xff08;x轴&#xff0c;y轴均翻转&#xff09;2.5 沿x方向错切2.6 沿y方向错切2.7 旋转2.8 单位矩阵2.9 矩阵的…

ES在企业项目中的实战总结,彻底掌握ES的使用

通过之前两篇文章 了解了ES的核心概念和基础使用学习进阶的DSL语法处理复杂的查询 这段时间通过在本企业代码中对ES框架的使用&#xff0c;总结了不少经验。主要分为三点 企业封装了ES原生的api&#xff0c;需要使用企业项目提供的接口实现 -------简单使用&#xff08;本章节目…

PyCharm中文使用详解

PyCharm是一个Python IDE&#xff0c;可以帮助程序员节省时间&#xff0c;提高生产力。那么具体怎么用呢&#xff1f;本文介绍了PyCharm的安装、插件、外部工具、专业功能等&#xff0c;希望对大家有所帮助。 之前没有系统介绍过PyCharm。如何配置环境&#xff0c;如何DeBug&a…

Go语言入门心法(十四): Go操作Redis实战

Go语言入门心法(一): 基础语法 Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 Go语言入门心法(四): 异常体系 Go语言入门心法(五): 函数 Go语言入门心法(六): HTTP面向客户端|服务端编程 Go语言入门心法(七): 并发与通道 Go语言入门心法(八): mysql驱动安装报错o…

数据安全小课堂开讲啦!看这里!

数据安全小课堂开讲啦&#xff01;看这里&#xff01; 1、什么是数据&#xff1f; 《数据安全法》第三条明确&#xff0c;本法所称的数据&#xff0c;就是指任何以电子或者其他方式对信息的记录。小到个人使用手机、电脑等电子产品时浏览的网页、下载的应用、存储的文件&…

前端数据可视化之【Echarts下载使用】

目录 &#x1f31f;下载&#x1f31f;浏览器引入&#x1f31f;模块化引入 &#x1f31f;使用&#x1f31f;基本使用步骤 &#x1f31f;绘制一个简单的图表&#x1f31f;写在最后 &#x1f31f;下载 &#x1f31f;浏览器引入 官网下载界面&#xff1a;官方网站 或 Echarts中文…

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

首先看效果&#xff01; 比如轮播图时红色&#xff0c;那么背景的底色也是红色&#xff0c;轮播图时黄色&#xff0c;背景的底色也是黄色&#xff0c;这就是根据轮播图的图片切换&#xff0c;而改变背景颜色随轮播图颜色一致 话不多说&#xff0c;直接上代码&#xff01;非常简…

css-边框流水线

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"initial-scale1.0, user-scalableno" /><title></title><style type&…

centos搭建elastic集群

1、环境可以在同一台集群上搭建elastic&#xff0c;也可以在三台机器上搭建&#xff0c;这次演示的是在同一台机器搭建机器。 2、下载elastic &#xff1a;https://www.elastic.co/cn/downloads/past-releases#elasticsearch 2、​​​​​​ tar -zxvf elasticsearch-xxx-版…

软硬件架构分层总结

一、前言 软件系统很多架构图我们经常看到是这样的三段 就是这三段就可以演化出很多层 二、硬件架构分层 硬件层&#xff0c;基本是计算机硬件的体系结构&#xff0c;包括硬盘设备&#xff0c;cpu&#xff0c;内存&#xff0c;控制器&#xff0c;运算器&#xff0c;寄存器&am…

淘宝API接口(商品信息获取,订单管理,库存管理,数据分析和优化)

淘宝API接口可以用于许多业务场景&#xff0c;以下是一些常见的应用场景&#xff1a; 商品信息获取&#xff1a;通过淘宝API接口可以获取商品的详细信息&#xff0c;包括商品标题、价格、库存、销量、评价等数据。这些信息可以用于在自己的网站或应用程序中展示商品&#xff0…

0基础学习PyFlink——使用PyFlink的SQL进行字数统计

在《0基础学习PyFlink——Map和Reduce函数处理单词统计》和《0基础学习PyFlink——模拟Hadoop流程》这两篇文章中&#xff0c;我们使用了Python基础函数实现了字&#xff08;符&#xff09;统计的功能。这篇我们将切入PyFlink&#xff0c;使用这个框架实现字数统计功能。 PyFl…

Vue中使用Web Serial API连接串口,实现通信交互

Vue中使用Web Serial API连接串口&#xff0c;实现通信交互 Web Serial API&#xff0c;web端通过串口与硬件通信; 该API是JS本身 navigator 对象上就独有的&#xff0c;所以与Vue和React框架开发都没有太大的关系&#xff0c; 串口是一个双向通信接口&#xff0c;允许字节发送…

Visual Studio Code (VS Code)安装教程

Visual Studio Code&#xff08;简称“VS Code”&#xff09;。 1.下载安装包 VS Code的官网&#xff1a; Visual Studio Code - Code Editing. Redefined 首先提及一下&#xff0c;vscode是不需要破解操作的&#xff1b; 第一步&#xff0c;看好版本&#xff0c;由于我的系…

几个Web自动化测试框架的比较:Cypress、Selenium和Playwright

介绍&#xff1a;Web自动化测试框架对于确保Web应用程序的质量和可靠性至关重要。它们帮助开发人员和测试人员自动执行重复性任务&#xff0c;跨多个浏览器和平台执行测试&#xff0c;并在开发早期发现问题。 以下仅代表作者观点&#xff1a; 本文探讨来3种流行的Web自动化测…

17 结构型模式-享元模式

1 享元模式介绍 2 享元模式原理 3 享元模式实现 抽象享元类可以是一个接口也可以是一个抽象类,作为所有享元类的公共父类, 主要作用是提高系统的可扩展性. //* 抽象享元类 public abstract class Flyweight {public abstract void operation(String extrinsicState); }具体享…

【计算机网络】UDP的报文结构和注意事项

UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种无连接的协议&#xff0c;它在传输层中提供了简单、不可靠的数据传输服务。与TCP&#xff08;Transmission Control Protocol,传输控制协议&#xff09;不同&#xff0c;UDP不需要建立连接&…

使用Redis部署 PHP 留言板应用

使用Redis部署 PHP 留言板应用 启动 Redis 领导者&#xff08;Leader&#xff09;启动两个 Redis 跟随者&#xff08;Follower&#xff09;公开并查看前端服务清理 启动 Redis 数据库 创建 Redis Deployment apiVersion: apps/v1 kind: Deployment metadata:name: redis-le…