AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【前端】【HTML】震惊 | 我的网站突然传出阵阵猫叫声，喵~

2022-05-17 448
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 大家好，这里是程序员南方者。今天，我给大家来介绍如何给猫咪的动作基础上添加喵叫的音频.这里直接就拿站长之家的猫咪动画模板的源码来进行添加完善喵叫功能了。如果你已有现成的代码或者素材模板，也可以进行参考，为你的小猫叫起来~喵~ 喵~ 喵~

微信截图_20220517222245.png


一起用代码吸猫！本文正在参与【喵星人征文活动】


一 前言

大家好，这里是程序员南方者。

今天，我给大家来介绍如何给猫咪的动作基础上添加喵叫的音频.

这里直接就拿站长之家的猫咪动画模板的源码来进行添加完善喵叫功能了。

如果你已有现成的代码或者素材模板，也可以进行参考，为你的小猫叫起来~

喵~ 喵~ 喵~


二 “硬”核代码

【html代码】


<!-- 找到需要添加到鼠标移动到的地方就播放音频的地方 -->
    <a href="#" onMouseOver="meow('ear')">
        <div>需要鼠标移动到的地方就播放音频</div>
    </a>
    <!-- 音频 -->
    <audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
    <audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
    <audio id="cat-q" src="cute.mp3" preload="auto"></audio>


【js代码】


function meow(name) {
            // 发出猫叫声
            switch (name) {
                case 'mouse':
                // 碰到小嘴巴的时
                    var rainMusic = document.getElementById("cat-meek");
                    rainMusic.play();
                    break;
    case 'tail':
                    // 踩到猫尾巴了！
                    var rainMusic = document.getElementById("cat-angry");
                    rainMusic.play();
                    break;
                case 'ear':
                    // 摸摸猫尔多~
                    var rainMusic = document.getElementById("cat-q");
                    rainMusic.play();
                    break;
              }
    }


三 展示情况

【展示地址】


主子，来玩撒~


nanfangzhe.gitee.io/cat-meow


【展示效果】


当前掘金仅支持gif效果，喵叫只能自行脑补:( 　　喵喵喵~


也可转到，b站观看效果：www.bilibili.com/video/BV17S…


链接

四 完整代码

【当前用到的猫叫音频下载】


nanfangzhe.gitee.io/cat-meow/an…

nanfangzhe.gitee.io/cat-meow/me…

nanfangzhe.gitee.io/cat-meow/cu…


【小icon】


nanfangzhe.gitee.io/cat-meow/ca…


【cat.html页面】


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>碰到猫咪不同位置不同叫声 - 南方者</title>
  <link rel="shortcut icon" href="./cat.ico">
  <style>
    .cat {
      width: 500px;
      margin: 0 auto;
      position: relative;
      cursor: pointer;
    }
    .head_content {
      position: absolute;
      top: 100px;
    }
    .ear_left {
      width: 100px;
      height: 150px;
      background-color: #FCEDBC;
      border-radius: 50% / 10%;
      position: absolute;
      top: 22px;
      left: 16px;
      transform: rotate(-20deg);
    }
    .ear_right {
      width: 100px;
      height: 150px;
      background-color: #FCEDBC;
      border-radius: 50% / 10%;
      position: absolute;
      top: 22px;
      left: 227px;
      transform: rotate(20deg);
    }
    .head {
      width: 345px;
      height: 270px;
      background-color: #FFF5D7;
      -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      position: absolute;
      top: 0;
    }
    .brow_left {
      width: 44px;
      height: 20px;
      border: 1px solid transparent;
      border-top: 2px solid #000;
      border-radius: 50%/35%;
      position: absolute;
      top: 49px;
      left: 60px;
      transform: rotate(-37deg);
    }
    .brow_right {
      width: 44px;
      height: 20px;
      border: 1px solid transparent;
      border-top: 2px solid #000;
      border-radius: 50%/35%;
      position: absolute;
      top: 49px;
      left: 240px;
      transform: rotate(37deg);
    }
    .eye_left {
      width: 70px;
      height: 70px;
      background: #fff;
      border: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 67px;
      left: 70px;
    }
    .eye_right {
      width: 70px;
      height: 70px;
      background: #fff;
      border: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 67px;
      left: 205px;
    }
    .pupil {
      width: 38px;
      height: 38px;
      background: #000;
      border-radius: 50%;
      position: absolute;
      top: 7px;
      left: 30px;
    }
    .beard_left1 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 158px;
      left: -50px;
      transform: rotate(10deg);
    }
    .beard_left2 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 187px;
      left: -60px;
      transform: rotate(-7deg);
    }
    .beard_left3 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 208px;
      left: -50px;
      transform: rotate(-16deg);
    }
    .beard_right1 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 158px;
      left: 300px;
      transform: rotate(-10deg);
    }
    .beard_right2 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 187px;
      left: 310px;
      transform: rotate(7deg);
    }
    .beard_right3 {
      width: 95px;
      border-top: 1px solid #000;
      position: absolute;
      top: 208px;
      left: 300px;
      transform: rotate(16deg);
    }
    .nose {
      width: 20px;
      height: 10px;
      background-color: #000;
      border-radius: 50%/40%;
      position: absolute;
      top: 142px;
      left: 161px;
    }
    .mouse {
      position: absolute;
      top: 152px;
      left: 171px;
    }
    .mouse_top {
      height: 10px;
      border-left: 1px solid #000;
      position: absolute;
      top: 0;
      left: 0;
    }
    .mouse_left {
      width: 100px;
      height: 100px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: -78px;
      left: -86px;
    }
    .mouse_right {
      width: 100px;
      height: 100px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: -78px;
      left: -14px;
    }
    .mouse_bottom {
      width: 20px;
      height: 20px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      position: absolute;
      top: 8px;
      left: -9px;
      transform: rotate(45deg);
    }
    .mouse_bottom_show {
      width: 100px;
      height: 100px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: -63px;
      left: -49px;
      display: none;
    }
    .miao {
      position: absolute;
      top: -5px;
      left: 52px;
      font-size: 20px;
      opacity: 0;
      color: #FD7055;
    }
    @keyframes miaoAnim {
      0% {
        opacity: 0;
        top: -5px;
        left: 52px;
      }
      30% {
        opacity: 1;
        top: -20px;
        left: 72px;
        font-size: 23px;
      }
      65% {
        opacity: 0.5;
        top: -35px;
        left: 92px;
        font-size: 26px;
      }
      100% {
        opacity: 0;
        top: -50px;
        left: 112px;
        font-size: 30px;
      }
    }
    .mouse:hover .mouse_bottom {
      display: none;
    }
    .mouse:hover .mouse_bottom_show {
      display: block;
    }
    .mouse:hover .miao {
      animation: miaoAnim 1.5s linear;
    }
    .body_content {
      position: absolute;
      top: 305px;
      left: 101px;
    }
    .body {
      width: 140px;
      height: 165px;
      background: #FCEDBC;
      border: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
    }
    .arm_left {
      width: 20px;
      height: 80px;
      background: #FAE8AD;
      border: 1px solid #000;
      border-radius: 50% / 40%;
      position: absolute;
      top: 30px;
      left: 10px;
      transform: rotate(50deg);
      z-index: -20;
    }
    .arm_right {
      width: 20px;
      height: 80px;
      background: #FAE8AD;
      border: 1px solid #000;
      border-radius: 50% / 40%;
      position: absolute;
      top: 30px;
      left: 110px;
      transform: rotate(-50deg);
      z-index: -20;
    }
    .leg_left {
      width: 30px;
      height: 93px;
      background: #FAE8AD;
      border: 1px solid #000;
      border-radius: 50% / 40%;
      position: absolute;
      top: 88px;
      left: 14px;
      transform: rotate(-20deg);
      z-index: -20;
    }
    .leg_right {
      width: 30px;
      height: 93px;
      background: #FAE8AD;
      border: 1px solid #000;
      border-radius: 50% / 40%;
      position: absolute;
      top: 88px;
      left: 96px;
      transform: rotate(20deg);
      z-index: -20;
    }
    .tail {
      position: absolute;
      top: 86px;
      left: 52px;
      z-index: -30;
      animation: tailanim 1.5s infinite;
    }
    .tail1 {
      width: 236px;
      height: 100px;
      border: 1px solid transparent;
      border-top: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(-25deg);
    }
    .tail2 {
      width: 61px;
      height: 41px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: -13px;
      left: 145px;
      transform: rotate(-38deg);
    }
    .tail3 {
      width: 23px;
      height: 30px;
      border: 1px solid transparent;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 5px;
      left: 148px;
      transform: rotate(121deg);
    }
    @keyframes tailanim {
      /*尾巴动画*/
      20% {
        transform: rotate(5deg);
      }
      40% {
        transform: rotate(0deg);
      }
      60% {
        transform: rotate(10deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .ear_left:hover {
      animation: earLeftAnim 0.5s linear;
    }
    .ear_right:hover {
      animation: earRightAnim 0.5s linear;
    }
    @keyframes earLeftAnim {
      50% {
        top: 13px;
        transform: rotate(-3deg);
      }
      100% {
        top: 22px;
        transform: rotate(-20deg);
      }
    }
    @keyframes earRightAnim {
      50% {
        top: 13px;
        transform: rotate(3deg);
      }
      100% {
        top: 22px;
        transform: rotate(20deg);
      }
    }
  </style>
</head>
<body>
  <div class="cat">
    <div class="head_content">
      <div class="ear_left">
        <a href="#" onMouseOver="meow('ear')">
          <div style="height: 50px;width: 100px;"></div>
        </a>
      </div>
      <div class="ear_right">
        <a href="#" onMouseOver="meow('ear')">
          <div style="height: 50px;width: 100px;"></div>
        </a>
      </div>
      </a>
      <div class="head">
      </div>
      <div class="brow_left"></div>
      <div class="brow_right"></div>
      <div class="eye_left">
        <div id="pL" class="pupil"></div>
      </div>
      <div class="eye_right">
        <div id="pR" class="pupil"></div>
      </div>
      <div class="beard_left1"></div>
      <div class="beard_left2"></div>
      <div class="beard_left3"></div>
      <div class="beard_right1"></div>
      <div class="beard_right2"></div>
      <div class="beard_right3"></div>
      <div class="nose"></div>
      <div class="mouse">
        <div class="mouse_top"></div>
        <div class="mouse_left"></div>
        <div class="mouse_right"></div>
        <a href="#" onMouseOver="meow('mouse')">
          <div class="mouse_bottom"></div>
          <div class="mouse_bottom_show"></div>
        </a>
        <div class="miao">喵~</div>
      </div>
    </div>
    <div class="body_content">
      <div class="body"></div>
      <div class="arm_left"></div>
      <div class="arm_right"></div>
      <div class="leg_left"></div>
      <div class="leg_right"></div>
      <div class="tail">
        <div class="tail1"></div>
        <a href="#" onMouseOver="meow('tail')">
          <div class="tail2"></div>
          <div class="tail3"></div>
        </a>
      </div>
    </div>
  </div>
  <!-- 猫叫音频 start -->
  <audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
  <audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
  <audio id="cat-q" src="cute.mp3" preload="auto"></audio>
  <!-- 猫叫音频 end -->
  <script>
    function meow(name) {
      // 发出猫叫声
      switch (name) {
        case 'mouse':
          // 碰到小嘴巴的时
          var rainMusic = document.getElementById("cat-meek");
          rainMusic.play();
          break;
        case 'tail':
          // 踩到猫尾巴了！
          var rainMusic = document.getElementById("cat-angry");
          rainMusic.play();
          break;
        case 'ear':
          // 摸摸猫尔多~
          var rainMusic = document.getElementById("cat-q");
          rainMusic.play();
          break;
      }
    }
  </script>
  <script>
    //获取cat所在div的位置
    var catx = document.getElementsByClassName("cat")[0].offsetLeft;
    var pL = document.getElementById("pL");
    var pR = document.getElementById("pR");
    var r = 17;
    document.onmousemove = function (ev) {
      var e = ev || event;
      var m = [];
      m.x = e.clientX - catx; //鼠标坐标能落在左边等位置
      m.y = e.clientY - 170; //head_content、head、eye离上方的距离，使鼠标能落在上方区域
      var s = [];
      s.x = pL.offsetLeft;
      s.y = pL.offsetTop;
      var mosx = Math.abs(m.x - s.x);
      var mosy = Math.abs(m.y - s.y);
      var angle = Math.atan(mosy / mosx);
      var cx = 0,
        cy = 0;
      if (m.x >= s.x && m.y <= s.y) {
        cx = Math.cos(angle) * r;
        cy = Math.sin(angle) * -r;
        //            console.log("右下");
      }
      if (m.x < s.x && m.y < s.y) {
        cx = Math.cos(angle) * -r;
        cy = Math.sin(angle) * -r;
        //            console.log("左下");
      }
      if (m.x < s.x && m.y > s.y) {
        cx = Math.cos(angle) * -r;
        cy = Math.sin(angle) * r;
        //            console.log("左上");
      }
      if (m.x > s.x && m.y > s.y) {
        cx = Math.cos(angle) * r;
        cy = Math.sin(angle) * r;
        //            console.log("右上");
      }
      if ((m.x + catx) >= catx && (m.x + catx) <= (catx + 345) && (m.y + 170) >= 100 && (m.y + 170) <= 360) {
        pL.style.top = 15 + 'px';
        pR.style.top = 15 + 'px';
        pL.style.left = 18 + 'px';
        pR.style.left = 18 + 'px';
      } else {
        pL.style.top = 15 + cy + 'px';
        pR.style.top = 15 + cy + 'px';
        pL.style.left = 17 + cx + 'px';
        pR.style.left = 17 + cx + 'px';
      }
    }
  </script>
  <!-- <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
  </div> -->
</body>
</html>


五 完整项目源码地址

【项目源码地址】


gitee.com/nanfangzhe/…


六 感谢

提供猫咪源码素材：站长素材

文章标签：
JavaScript
前端开发
程序员
关键词：
前端网站
HTML网站
前端html
前端html网站
南方者
目录
相关文章
土木林森
|
12天前
|
前端开发 JavaScript API
惊呆了！这些前端技术竟然能让你的网站实现无缝滚动效果！
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术，包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术，帮助开发者轻松实现流畅的滚动效果，提升用户体验。
土木林森
83 29
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
255 65
众所周知
|
5天前
|
前端开发 JavaScript UED
惊呆了！这些前端技巧竟然能让你的网站秒变高大上，赶快学起来！
前端技术是网页设计的核心，能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧：动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript，可以实现视觉吸引的动态背景；微交互设计如按钮点击效果能增强用户参与感；响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学，效果显著，值得尝试。
众所周知
17 3
土木林森
|
5天前
|
移动开发 前端开发 JavaScript
惊！这些前端技术竟然能让你的网站在移动端大放异彩！
随着互联网技术的发展，移动设备成为主要的上网工具。本文介绍了几种关键的前端技术，包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计，帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
土木林森
15 3
土木林森
|
11天前
|
前端开发 JavaScript API
惊呆了！这些前端技巧竟然能让你的网站支持AR/VR体验！
【10月更文挑战第31天】在数字化时代，用户对网页交互体验的要求日益提高，传统二维网页已难以满足需求。本文介绍如何利用前端技术，特别是Three.js，实现AR/VR体验，提升用户满意度和网站价值。通过示例代码，展示如何创建简单的3D场景，并探讨AR/VR技术的基本原理和常用工具，帮助开发者打造沉浸式体验。
土木林森
26 6
土木林森
|
11天前
|
编解码 前端开发 JavaScript
前端界的黑科技：掌握这些技术，让你的网站秒变未来感十足！
【10月更文挑战第31天】前端技术日新月异，黑科技层出不穷，让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例，展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备，前端框架如React、Vue则提高开发效率和代码质量。
土木林森
24 3
土木林森
|
12天前
|
JSON 前端开发 搜索推荐
惊！这些前端技术竟然能让你的网站实现个性化推荐功能！
【10月更文挑战第30天】随着互联网技术的发展，个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式，在实现个性化推荐中扮演关键角色。本文将深入解析这些技术，并通过示例代码展示其实际应用。
土木林森
43 4
土木林森
|
13天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技：掌握这些技术，让你的网站秒变智能助手！
【10月更文挑战第30天】随着前端技术的发展，网站正逐渐变成智能助手。本文探讨了四大关键技术：自然语言处理（NLP）使网站理解用户输入；机器学习实现个性化推荐；Web Notifications API发送重要提醒；Web Speech API实现语音交互。通过这些技术，网站不仅能更好地理解用户，还能提供更智能、个性化的服务，提升用户体验。
土木林森
28 3
土木林森
|
13天前
|
搜索推荐 前端开发 UED
惊！这些前端技巧竟然能让你的网站在搜索引擎中获得更高排名！
【10月更文挑战第30天】在数字化时代，网站的搜索引擎排名直接影响流量和品牌知名度。本文通过四个真实案例，揭秘前端技巧如何提升搜索引擎排名：1. 关键词优化与布局；2. 高质量内容与多媒体优化；3. 网站结构优化与URL优化；4. 提升页面加载速度。这些技巧不仅提高排名，还能增强用户体验，助力业务发展。
土木林森
30 3
土木林森
|
12天前
|
前端开发 JavaScript 开发者
惊！这些前端技术竟然能让你的网站在社交媒体上疯传！
【10月更文挑战第30天】在这个信息爆炸的时代，社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传，包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法，提升用户分享意愿，使网站成为社交媒体上的热门话题。
土木林森
24 2

热门文章

最新文章

  • 1
    前端性能优化参考资料
  • 2
    前端，测试如何修改后端接口返回的响应数据
  • 3
    前端 时间个性化 插件 jquery.timeago.js
  • 4
    前端分页插件pagination
  • 5
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 6
    wordpress页面前端添加编辑按钮
  • 7
    高级前端常见的面试题？
  • 8
    深入了解Webpack：前端模块打包工具
  • 9
    web前端开发--------CSS基础教程
  • 10
    前端学习案例-react18+ts+redux实战1-rudux-tookit
  • 1
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    130
  • 2
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    81
  • 3
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    555
  • 4
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    156
  • 5
    动态粒子发射404网站HTML源码
    60
  • 6
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    322
  • 7
    HTML 【实用教程】（2024最新版）
    45
  • 8
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    251
  • 9
    HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
    159
  • 10
    ​「Python大数据」词频数据渲染词云图导出HTML
    84

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 基于webpack和npm的前端组件化实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云OSS设置跨域访问