程序员经验分享-hwhale

加水动画

2024-02-16

我正在尝试获取擦除动画以使圆圈看起来像它充满了水。我遇到了两个错误，甚至无法解决第三个错误：

  1. 填错了方式
  2. 填充后重置为空（黑色） *
  3. 目前，我正在使用<img>标签，但我想将此效果移至body { background-image: }并需要一些关于如何做到这一点的指导。

到目前为止我已经尝试过： http://jsfiddle.net/um0rnL56/1/ 

#banner {
  width: 300px;
  height: 300px;
  position: relative;
}
#banner div {
  position: absolute;
}
#banner div:nth-child(2) {
  -webkit-animation: wipe 6s;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: up;
  -webkit-mask-size: 300px 3000px;
  -webkit-mask-position: 300px 300px;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
}
@-webkit-keyframes wipe {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 300px 300px;
  }
}
<div id="banner">
  <div>
    <img src="http://i.imgur.com/vklf6kK.png" />
  </div>
  <div>
    <img src="http://i.imgur.com/uszeRpk.png" />
  </div>
</div>

给它一个默认的蒙版位置@anpsmn https://stackoverflow.com/users/473016/anpsmn建议，不再将其重置为黑色。


这里有四个不同的版本来补充@misterManSam 的精彩回答 https://stackoverflow.com/questions/29738787/css-wipe-up-animation-to-look-like-filling-with-water/29739227#29739227.

1. 缓和

解释

如果你把一个圆形碗装满液体，它的底部和顶部会比中间填充得更快（因为更宽的中间部分有更多的区域需要覆盖）。因此，考虑到这个粗略的解释，动画需要：快速开始，在中间缓慢，然后当碗在顶部再次变窄时快速结束。

为此，我们可以使用 CSS3 缓动函数：cubic-bezier(.2,.6,.8,.4).

看看下面的例子。

(如果你想调整缓动，这里是一个很好的资源：http://cubic-bezier.com/#.2,.6,.8,.4 http://cubic-bezier.com/#.2,.6,.8,.4)

Example:

#banner {
  width: 150px;
  height: 150px;
  position: relative;
  background: #000;
  border-radius: 50%;
  overflow: hidden;
}
#banner::before {
  content: '';
  position: absolute;
  background: #04ACFF;
  width: 100%;
  bottom: 0;
  animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
@keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
<div id="banner">

</div>

2.SVG 的美味

让我们更进一步？如果我们想使用 CSS 在“水”上添加波浪形表面怎么办？我们可以使用令人惊叹的 SVG 来做到这一点。我在 Adob​​e Illustrator 中创建了一个波浪形 SVG 图像，然后使用单独的 CSS 动画将其从左向右循环移动，瞧：

Example

#banner {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background: #000;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
#banner .fill {
    animation-name: fillAction;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#banner #waveShape {
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 0.5s;
    width:300px;
    height: 150px;
    fill: #04ACFF;
}
@keyframes fillAction {
    0% {
        transform: translate(0, 150px);
    }
    100% {
        transform: translate(0, -5px);
    }
}
@keyframes waveAction {
    0% {
        transform: translate(-150px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
<div id="banner">
<div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</div>
</div>

3.带浇注线

此示例包括一条倾倒线（大多数碗从顶部而不是底部填充）。浇注线首先从上到下进行动画处理，同时animation-delay属性会阻止填充动画发生，直到浇筑完成。

#banner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: #000;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  position: relative;
}

#banner .fill {
  transform: translateY(150px);
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-delay: 0.25s;
}

#banner .pour {
  width: 6px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  bottom: 0;
  top: 0;
  background: #009ae6;
  animation-name: pourAction;
  animation-timing-function: linear;
  animation-duration: 0.25s;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #04ACFF;
}

@keyframes pourAction {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fillAction {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
<div id="banner">
  <div class="pour"></div>
  <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
    </svg>
  </div>
</div>

4. With Serious Bling（具有美丽的美学）

此示例向 CSS 添加了更多属性，使其看起来更加真实。

.bowl {
  position: relative;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1);
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%);
  margin: 20px;
}
.bowl:before {
  overflow: hidden;
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1);
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 81%, #000000 100%);
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 2;
}
.bowl:after {
  content: "";
  width: 60px;
  border-radius: 50%;
  height: 5px;
  background: #039be4;
  box-shadow: inset 0 0 10px 0 #000;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 0;
  z-index: 2;
}
.bowl .inner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.bowl .inner:before {
  content: "";
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  right: 40%;
  top: 60%;
  z-index: 2;
}
.bowl .inner:after {
  content: "";
  width: 20px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  right: 30%;
  top: 15%;
  transform: rotate(-20deg);
  z-index: 2;
}
.bowl .fill {
  -webkit-animation-name: fillAction;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4);
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
}
.bowl .waveShape {
  -webkit-animation-name: waveAction;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #039be4;
}

@-webkit-keyframes fillAction {
  0% {
    -webkit-transform: translate(0, 150px);
  }
  100% {
    -webkit-transform: translate(0, 10px);
  }
}
@-webkit-keyframes waveAction {
  0% {
    -webkit-transform: translate(-150px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
/* For aesthetics only ------------------------------------------*/
body {
  margin: 0;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

h1 {
  font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-weight: 200;
  color: #fff;
  background: #039be4;
  padding: 20px;
  margin: 0;
  border-bottom: 10px solid #ccc;
}
h1 strong {
  font-family: "Segoe UI Black";
  font-weight: normal;
}

.explanation {
  padding: 20px 40px;
  float: right;
  background: #e64a19;
  -webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  border-bottom: 10px solid #ccc;
  max-width: 300px;
}
.explanation p {
  color: #fff;
  font-size: 0.8rem;
}
<div class="bowl">
  <div class="inner">
    <div class="fill">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
        <path class="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
	c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
	c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
      </svg>
    </div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

cssanimations

cssshapes

加水动画 的相关文章

  • 如何使用div绘制曲线？

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实

  • 图像下方不需要的边距

    我有一个图像和一个 div 我想将其放置在其下方 这是小提琴 http jsfiddle net d3Mne 1 http jsfiddle net d3Mne 1 问题是两者之间存在差距 此下边距仅出现在图像中 有什么办法可以去除吗 Se

  • CSS3 中均匀间隔的导航链接占据 ul 的整个宽度

    我想创建一个水平导航链接列表 其中导航链接均匀分布并占据封闭容器的整个宽度 ul 导航链接可以有不同的宽度 第一个和最后一个链接应与链接的开头和结尾对齐 ul 分别 意味着链接不居中 如下所示 left side right side li

  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本

  • 如何在 HTML 中制作三角形？

    我想使用基本的 CSS 在 HTML 页面中制作三角形 我正在使用需要时间加载的三角形图片 因此 我想减少页面的加载时间 HTML 不可能 但 CSS 可以 例子 div class div

  • 简化 CSS 代码

    我怎样才能简化这段代码 user panel subscribe user panel faves user panel tags user panel title user panel calendar a user panel item

  • 获取 CSS 计算结果以设置自定义属性

    我正在测试一个 CSS 框架 用于通过微类指定数字 例如 类似的东西 div class fifty percent wide 可能会翻译成width 50 该实现使用 CSS 变量 自定义属性 考虑以下 CSS fifty number

  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image

  • CSS：多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and

  • 有没有办法在 html 图像标签中显示位图数据？ [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width

  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • CSS：缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

  • 使用滤镜将css3灰色图像转为蓝色？

    我正在尝试将灰色图像变为更蓝色的色调 真的不知道如何为此设置滤镜或是否可能 该图像只有一种颜色 cacaca 其余部分透明 我正在尝试使用相同的图像进行一些叠加 以便它仅突出显示那些彩色部分而不是透明区域 一直在尝试其中的一些 但没有取得多

  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https

  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些

  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt

  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息？

  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序？

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

随机推荐

  • django：使用一对一扩展用户模型：如何保存（）配置文件模型的字段

    我有一个基本的 Django 应用程序 其中除了用户模型之外 我还使用扩展了配置文件模型一对一字段 模型 py class Profile models Model user models OneToOneField User on del

  • 在 info.plist 文件中设置 SceneDelegate

    我有一个应用程序目标和一些静态库 由于某些原因 我将 SceneDelegate 从应用程序目标移至静态库之一 在info plist文件中 SceneDelegate设置为 PRODUCT MODULE NAME SceneDelegat

  • Android Studio StackOverFlowError：null

    今天更新到 2 3 版本后 我的 Android Studio 停止工作了 null java lang StackOverflowError at java lang ClassLoader defineClass1 Native Met

  • 执行 WebAPI 2 JSON Post 时未找到 HttpRequestBase.GetBufferedInputStream

    使用 Visual Studio 创建 MVC5 WebAPI2 项目 创建了一个基本的 JSON POST 发布参数导致 HttpRequestBase GetBufferedInputStream 未找到失败 适用于 带有视觉工作室的W

  • Spark 文件流获取文件名

    我需要知道从输入目录流式传输的输入文件的文件名 下面是scala编程中的spark FileStreaming代码 object FileStreamExample def main args Array String Unit val s

  • wcf REST 服务和 JQuery Ajax Post：不允许方法

    有人知道这是怎么回事吗 我无法从 WCF Rest 服务获取 json 响应 Jquery ajax type POST url http localhost 8090 UserService ValidateUser data usern

  • 无法从 Spring Cloud Config Server 获取值到我的 Config-Client(limits-service)

    经过几天的互联网搜索和多次尝试 对我来说没有任何结果 我在这里写下 我有项目 弹簧云配置服务器其中包含以下文件 可以从以下位置访问完整项目https github com AshishBharadwaj94 spring cloud con

  • 线程的垃圾收集

    我需要保护吗Thread来自垃圾收集器的对象 那么包含线程运行的函数的对象呢 考虑这个简单的服务器 class Server readonly TcpClient client public Server TcpClient client

  • Node.js Express socket.io 端口 3000 正在使用

    我一直在关注这个 http socket io get started chat http socket io get started chat 有关如何使用 socket io 制作简单聊天应用程序的教程 然而 我尝试使用 Express

  • Xcode 构建时错误：“无法加载文件列表的内容：‘.../Info.plist’（在目标‘xxxx’中）

    Xcode 今天开始在项目中抛出此错误 我无法弄清楚它的含义以及如何对其进行故障排除 并且它不会出现在任何搜索中 它在尝试构建到设备后立即发生 没有编译脚本等 错误 无法加载文件列表的内容 Users Products Debug appl

  • 如何将字符串长度转换为像素单位？

    我有一个像这样的字符串 string s This is my string 我正在创建 Telerik 报告 我需要定义一个textbox这就是我的绳子的宽度 但是 大小属性需要设置为单位 像素 点 英寸等 如何将字符串长度转换为像素 以

  • C++ 中整数的幂[重复]

    这个问题在这里已经有答案了 我需要得到结果pow a b 作为整数 a 和 b 也是整数 目前 计算中 int pow double a double b 包含错误 一个函数可以是什么 它可以对整数执行 pow a b 并返回一个整数 但奇

  • 我可以在 C# 中将 json 反序列化为匿名类型吗？

    我从数据库中读取了一个很长的json 我只想要该 json 的一个属性 我有两个选择 A 为该 json 创建一个接口并反序列化到该接口 这是否有点矫枉过正 因为我只需要一个属性 b 找到我需要的子字符串 正则表达式 哪一个是首选 更新 我

  • 在 C++0x 中传递/移动构造函数的参数

    如果我有一个带有 n 个参数的构造函数 那么该构造函数的任何参数都可以是右值和左值 是否可以通过右值的移动语义来支持这一点 而无需为每个可能的右值 左值组合编写 2 n 构造函数 你可以按值来获取每一项 如下所示 struct foo fo

  • 如何在 Jenkins 中手动安装插件

    从更新中心安装插件会导致 检查互联网连接 无法连接到http www google com http www google com 也许您需要配置 HTTP 代理 部署插件失败 详细信息 hudson util IOException2 无

  • 使用 HtmlService HtmlTemplate 时设置 Google Apps 脚本 showModalDialog 的高度

    我目前正在将使用已弃用的 UI 服务的 Google Apps 脚本更改为 HtmlService 我使用以下代码创建了一个模式对话 在电子表格容器绑定脚本中 var htmlTemplate HtmlService createTempl

  • Angular 导出 Excel 客户端

    我正在使用 Angular v4 我想如何从组件中的对象开始构建 Excel 电子表格 我需要点击按钮下载 Excel 文件 并且我必须在客户端执行此操作 我有一个由数组组成的 json 文件 我需要将其传输到 Excel 文件上 可能可以

  • Strapi v4：填充时没有关系字段

    我正在尝试使用关系名称填充特定关系 categories 与 populate 参数结合使用 但它不会填充categories 当我查看架构时 我发现关系字段存在于属性对象中 但我的回复中仍然只得到非关系字段 我尝试了上面提到的所有组合St

  • 无需 Google 对话框的语音识别

    我将尝试使用带有 RecognitionListener 的语音识别 无需 Google 对话框 但不起作用 启动应用程序时只会发出蜂鸣声 我已将音频记录和互联网权限添加到清单文件中 我希望你告诉我并帮助我找到错误 我在 Log cat 上

  • 加水动画

    我正在尝试获取擦除动画以使圆圈看起来像它充满了水 我遇到了两个错误 甚至无法解决第三个错误 填错了方式 填充后重置为空 黑色 目前 我正在使用 img 标签 但我想将此效果移至body background image 并需要一些关于如何做

热门标签