那些遇到过的问题

填充水动画

Ari*_*osh 59 css svg css3 css-animations css-shapes

我试图通过一个擦拭动画来制作一个看起来像是充满水的圆圈.我遇到了两个错误,甚至无法解决第三个错误:

  1. 它填补了错误的方式
  2. 它填满后重置为空(黑色)*
  3. 目前,我正在使用这些<img>标签,但我想将此效果移至body { background-image: }需要指导如何执行此操作.

到目前为止我尝试了什么: 

#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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="banner">
  <div>
    <img src="http://i.imgur.com/vklf6kK.png" />
  </div>
  <div>
    <img src="http://i.imgur.com/uszeRpk.png" />
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

给它一个默认的掩码位置@anpsmn建议,不再将它重置为黑色.

Chr*_*les 104

这里有四个不同的版本来补充@ misterManSam的精彩答案.

1.随着轻松

说明

如果你装满了一个装满液体的圆形碗,它会在底部和顶部填充比在中间填充的更快(因为在更宽的中间部分有更多的区域可以覆盖).因此,考虑到粗略的解释,动画需要:快速开始,中间慢,然后当碗在顶部再次变窄时快速完成.

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

看看下面的例子.

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

例:

#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%;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="banner">

</div>
Run Code Online (Sandbox Code Playgroud)

2. SVG美味

让我们更进一步吧？如果我们想用CSS在"水"上添加波浪状表面怎么办？我们可以使用惊人的SVG来做到这一点.我在Adobe Illustrator中创建了一个波浪形的SVG图像,然后将其设置为动画,以便在一个循环中从左到右行进,并带有单独的CSS动画,并且瞧瞧:

例

#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);
    }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

4.严肃的金光闪闪(美丽的美学)

此示例为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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • Svg one非常好!+1 (8认同)
  • @JamesBarracca这使用SASS来设置大小:http://codepen.io/chrissp26/pen/KWvPjG？edit = 0100更改`$ width`变量以满足您的需要. (2认同)

mis*_*Sam 52

这可以通过一个div和一个伪元素来实现::before:

  • 在#banner被赋予border-radius: 50%创建一个圆圈,并overflow: hidden夹及其子里面

  • 将::before伪元素设置为100%高度,并使用该forwards值暂停动画100%.它从底部开始使用bottom: 0

  • 背景图像将在地方上的黑色和蓝色背景的应用#banner和#banner::before

兼容性: IE10 +和所有现代浏览器.该-webkit-前缀属性是最有可能不再需要你的关键帧动画.在caniuse.com上查看浏览器兼容性图表

工作实例

我添加了cubic-bezier(.2,.6,.8,.4) @ChrisSpittles答案中解释的内容.它提供了一个整洁的效果!

#banner {
  width: 300px;
  height: 300px;
  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%;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="banner">

</div>
Run Code Online (Sandbox Code Playgroud)

foc*_*yle 7

纯 CSS，没有 JavaScript，没有 SVG。开关overflow: hidden关断.shape 来看看它是如何工作的简单。

使用CSS 动画制作。你可以罚款填充和动画 @keyframes

如果您希望使用 JavaScript 加载填充 - 您可以访问.waveelement.js。的top: 50%;是0％，并且top: -75%是负载的100％。您可以根据需要使用这些数字。

.shape {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.shape:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 3;
}

.wave {
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  height: 200%;
  transform: translate(-25%, 0);
  background: #4973ff;
  animation: fill-up 10s ease infinite;
}

@keyframes fill-up {
  to {
    top: -75%;
  }
}

.wave:before,
.wave:after {
  content: '';
  position: absolute;
  width: 110%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
}

.wave:before {
  border-radius: 45%;
  background: rgba(179, 241, 255, 1);
  animation: animate 3s linear infinite;
}

.wave:after {
  border-radius: 40%;
  background: rgba(179, 241, 255, 0.5);
  animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="shape">
  <div class="wave">
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

jma*_*svt 6

我认为这实现了你的第一个目标:

#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,0)),
    color-stop(0.25,  rgba(0,0,0,0)),
    color-stop(0.27,  rgba(0,0,0,0)),
    color-stop(0.80,  rgba(0,0,0,1)),
    color-stop(1.00,  rgba(0,0,0,1)));
 }

 @-webkit-keyframes wipe {
     0% {
    -webkit-mask-position: 300px 300px;
  }
     100% {
    -webkit-mask-position: 0 0;
  }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

19485 次

最近记录：

6 年，11 月 前
相关归档
使用css在单元格(td)之间添加空格 83
如何使用jQuery更改css类规则？ 52
2个div并排排列,如何使正确的div填充宽度100%？ 41
是否可以在SVG中监听图像加载事件？ 14
如何在Selenium WebDriver中使用xPath来获取SVG元素？ 13
混合模式和动画之间的冲突 10
如何为文本生成SVG路径表示法 5
我可以使用 SkiaSharp 将 SVG 渲染为 PNG 吗？ 5
子元素上的Css3 Translate不起作用 2
背景大小的动画在 Safari 上不起作用 1
难疑归档
如何在本地和远程删除Git分支？ 16311
如何在Python中安全地创建嵌套目录？ 3909
如何使用Curl从终端/命令行发布JSON数据到测试Spring REST？ 2606
如何"git克隆"包括子模块？ 1864
在Mac上查找(并终止)进程锁定端口3000 1595
外部"C"在C++中有什么影响？ 1511
如何完全删除使用init创建的git存储库？ 1358
静态只读与const 1349
对JavaScript对象数组进行排序 1233
JavaScript中是否有常量？ 1118