Question

这里是编码的新手。我正在练习CSS，我正在尝试创建一个简单的动画。扭曲：我希望div的高度改变，但动画锚定div顶部的高度变化，我需要它锚定在底部。我一直在四处寻找变换原点元素，但这似乎没有帮助，因为它不是变换，而是高度的变化。我也试过旋转div 180度，但这也不起作用。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
.rowleteyeleft {
height: 100px; 
width: 50px; 
border-radius: 50%; 
background-color: hsl(46, 6%, 21%); 
position: relative; 
right: -70px; 
top: 70px; 
overflow:hidden;  
animation-name: blinkleft; 
animation-duration: 1s; 
animation-iteration-count: infinite; 
animation-direction:alternate;}

@keyframes blinkleft {
to {height: 10px}

</style>
</head>
<body>
<div class="rowleteyeleft"></div>

</body>
</html>

我需要添加什么才能让高度锚定在底部？

Answer 1

使用Pseudo-elements

＆＃13;

.rowleteyeleft {
  height: 100px;
  width: 50px;
  position: relative;
  right: -70px;
  top: 70px;
  overflow: hidden;
}

.rowleteyeleft:before {
  content:"";
  position:absolute;
  bottom: 0;
  border-radius: 50%;
  width:100%;
  height:100%;
  background-color: hsl(46, 6%, 21%);
  animation-name: blinkleft;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes blinkleft {
  to {
    height: 10px
  }
}

＆＃13;

<div class="rowleteyeleft"></div>

＆＃13;

此演示向您展示动画背后的操作

.wrapper {
  height: 100px;
  width: 50px;
  left: 70px;
  top: 70px;
  position: relative;
  /*this help us animate the child from the bottom*/
  overflow: hidden;
  border: 1px dashed hsl(46, 6%, 21%);
}
.rowleteyeleft {
  height: 10px;
  width: 100%;
  left: 0;
  bottom: 0px;
  position: absolute;
  border-radius: 50%;
  background-color: hsl(46, 6%, 21%);
  animation-name: blinkleft;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes blinkleft {
  to {
    height: 100px
  }
}

<div class=wrapper><!--give your animated element a parent-->
  <div class="rowleteyeleft"></div>
</div>

CSS动画 - 高度锚点

1 个答案: