代码之家 › 专栏 › 技术社区 › Mitya

CSS转换-倾斜试管,含液体

css-shapes css-animations css-transitions css

Mitya · 技术社区 · 10 年前

我有一个简单的CSS3过渡,包括一个试管,里面装有液体,向右倾斜60度。

当然,液体总是停留在水平面上,这就是我遇到的问题。我确实让它在某种程度上起作用,但液体的转变远不能令人信服。

这个想法是简单地将液体元件(它是管元件的子元件)旋转相同但相反的角度,即-60°。因此,净视觉效果是液体保持在0度旋转。液体元件具有足够的宽度以允许这种旋转而不显示空白。

代码笔: http://codepen.io/anon/pen/sIDtp (当前只有-moz前缀,没有-webkit)

HTML格式:

<div id='container'>
  <div id='tube'><div></div></div>
  <div id='tube_bottom'></div>
</div>

CSS格式

div, button { display: block; position: relative; }
#container {
  width: 50px;
  height: 150px;
  top: 30px;
  margin: 0 auto;
  transition: -moz-transform 1s
}
#container.transition { moz-transform: rotate(60deg); }
#tube {
  border: solid 6px red;
  border-top: none;
  border-bottom: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
  overflow: hidden;
}
#tube_bottom {
  width: 100%;
  height: 30%;
  border-radius: 50%;
  position: absolute;
  bottom: -15%;
  border: solid 6px red;
  background: blue;
}
#tube div {
  position: absolute;
  left: -175px;
  width: 400px;
  height: 85%;
  top: 30%;
  background: blue;
  transition: -moz-transform 1s, top 1s;
}
#container.transition #tube div { moz-transform: rotate(-60deg); top: 70%; }

如您所见,我还必须修改 top 房地产,这是不理想的,告诉我,我可能不会这样做的正确方式。它看起来好像液体元素无法围绕其中心点旋转(我认为这是 transform-origin .

有人能给我一些如何让这种过渡看起来自然的建议吗?

2 回复 | 直到 9 年前

web-tiki 10 年前

不同的方法: 把水倾斜一下怎么样?

该管由以下材料制成:

一个div和两个伪元素
变换倾斜和旋转
长方体阴影

DEMO (无供应商前缀)

HTML格式:

<div class="tube"></div>

CSS:

.tube {
    border: solid 6px red;
    border-top: none;
    border-bottom:none;
    width:50px;
    height:180px;
    position:relative;
    margin:0 auto;
    transition:transform 1s;
}
.tube:after, .tube:before {
    content:'';
    position:absolute;
    width:100%;
    background:blue;
}
.tube:after {
    top:100%;
    left:-6px;
    width:100%;
    padding-bottom:100%;
    border: solid 6px red;
    border-top: none;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 0px -30px 0px -6px blue, 0px -50px 0px -6px blue;
}
.tube:before {
    bottom:0;
    height: 100px;
    width:50px;
    z-index:-1;
    transition:transform 1s;
}
.tube:hover {
    transform: rotate(60deg);
}
.tube:hover:before {
    transform: skewY(-60deg);
}

Community CDub 5 年前

由于管的宽度透视随其转动而增加,倾斜液体的作用速度应成反比,转动时较慢,返回时较快。。。

通过设置不同的转弯和折返过渡速度,我获得了更好的视觉效果:

Updated Codepen

#tube div {
  position: absolute;
  left: -175px;
  width: 400px;
  height: 85%;
  top: 30%;
  background: blue;
  transition: -webkit-transform 1s, top 0.5s;
}
#container.transition #tube div {
  -webkit-transform: rotate(-60deg);
  transition: -webkit-transform 1s, top 1.4s;
  top: 70%;
}

虽然它仍然可以得到一些改进。。。(对不起,我把它都改成了 -webkit- )

但也许你应该考虑使用 animation 和 @keyframes ,因此可以为每个转换百分比设置特定值。