Question

我想得到这个效果：

但我不能只移动内容，而是固定容器。如果你看到我的小提琴，我会一起移动，内容和容器。甚至我想将悬停放在圆圈div上，而不是像现在这样的内容，因为现在当动画结束时它会丢失悬停。

要记住一点细节：

我需要在运行时更新应该显示的文本根据用户选择的语言翻译。

这是我的fiddle

.frame {
  display: flex;
  background-color: green;
  height: 200px;
  width: 200px;
  flex-direction: center;
  justify-content: center;
  align-items: center;
}

.oval {
  display: flex;
  background-color: white;
  border-radius: 50px;
  width: 100px;
  height: 100px;
}

.box {
  display: flex;
  flex-direction: column;
  background-color: gray;
  height: 100px;
  width: 100px;
  position: relative;
  top: 25px;
  transition: top 200ms ease-in;
  border-radius: 50px;
}

.box:hover {
  top: -50px;
  transition: top 200ms ease-in;
  animation: ticker 25s cubic-bezier(1, 0, .5, 0);
}

@keyframes  ticker {
  0% {
    margin-top: 0
  }
  25% {
    margin-top: -30px
  }
  50% {
    margin-top: -60px
  }
  75% {
    margin-top: -90px
  }
  100% {
    margin-top: 0
  }
}

.box-inn {
  flex: 1;
  margin: 5%;
  color: white;
  text-align: center;
  align-items: center;
}

.first {
  background-color: blue;
}

.second {
  background-color: red;
}

<div class="frame">
  <div class="oval">
    <div class="box">
      <div class="box-inn first">
        Text 1
      </div>
      <div class="box-inn second">
        Text 2
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用伪元素。首先在父级上隐藏:after transform: translateY(100%)和overflow: hidden，并在悬停时为:before翻译100%并将:after移至0。

＆＃13;

.elem {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  color: white;
  border-radius: 50%;
  background: #4CA5D0;
  overflow: hidden;
}
.elem:after,
.elem:before {
  content: 'Top';
  position: absolute;
  transition: all 0.3s ease-in;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elem:after {
  content: 'Bottom';
  transform: translateY(100%);
}
.elem:hover:before {
  transform: translateY(-100%);
}
.elem:hover:after {
  transform: translateY(0);
}

＆＃13;

<div class="elem"></div>

＆＃13;

如果您不想使用伪元素Fiddle

Answer 2

如果您的图标是图像，则可能需要非伪元素方法。这是一个使用字体真棒图标来说明图像的例子（但是fa图标可以与伪元素一起使用）

.link {
  position: relative; /* for absolute positioned children to work */
  display: inline-flex;
  flex-direction: column;
  height: 100px; /* this method uses absolutely position chldren so..*/
  width: 100px; /* ..a fixed width and height was needed */
  color: white;
  border-radius: 100%;
  border-color: white;
  border-style: solid;
  border-width: 2px;
  overflow: hidden; /* hides the overflowing elements */
}
.icon {
  position: absolute;
  top: 50%; /* vertically position icon in center in combination with transform -50% */
  left: 50%; /* same deal with horizontal centering */
  transform: translate(-50%, -50%); /* horizontal, vertical */
  transition: all 0.2s ease;
}
.text {
  position: absolute;
  top: 150%; /* positions text under the .link container element */
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}
.link:hover .icon {
  top: -50%; /* positions icon above the .link container element */
}
.link:hover .text {
  top: 50%; /* moves text into center of .link container element */
}

/* styling - ignore */
body {display: flex;justify-content: center;align-items: center;  height: 100vh;margin: 0;font-size: 24px;background-color: hsl(189, 72%, 45%);font-variant: small-caps;font-family: verdana;}.icon i {font-size: 40px;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="link" href="https://jsfiddle.net/Hastig/4akmbgc1/">
  <div class="icon"><i class="fa fa-home"></i></div>
  <div class="text">fiddle</div>
</a>

<强>拨弄

https://jsfiddle.net/Hastig/4akmbgc1/

Answer 3

关注@Nenad Vracar回答：

在：

我需要在运行时更新要显示的文本根据用户选择的语言翻译。

您可以在伪元素'attr()属性中使用data-attributes和content CSS函数。

注意：在语言处理逻辑中使用JS更改这些数据属性。

.elem {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  color: white;
  border-radius: 50%;
  background: #4CA5D0;
  overflow: hidden;
}
.elem:after,
.elem:before {
  content: attr(data-top-text);
  position: absolute;
  transition: all 0.3s ease-in;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elem:after {
  content: attr(data-bottom-text);
  transform: translateY(100%);
}
.elem:hover:before {
  transform: translateY(-100%);
}
.elem:hover:after {
  transform: translateY(0);
}

<div class="elem" data-top-text="top_text" data-bottom-text="bottom_text"></div>

另一种方法是使用:lang伪类。

在元素中使用lang属性。

.elem {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  color: white;
  border-radius: 50%;
  background: #4CA5D0;
  overflow: hidden;
}
.elem:after,
.elem:before {
  content: "top_text";
  position: absolute;
  transition: all 0.3s ease-in;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elem:after {
  content: "bottom_text";
  transform: translateY(100%);
}
.elem:hover:before {
  transform: translateY(-100%);
}
.elem:hover:after {
  transform: translateY(0);
}
.elem:lang(es):before {
  content: "texto_superior";
}
.elem:lang(es):after {
  content: "texto_inferior";
}

<div class="elem"></div>
<div class="elem" lang="es"></div>

更改html lang属性：

document.getElementById('change-lang').addEventListener('click', function() {
  document.documentElement.setAttribute('lang', 'es');
});

.elem {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  color: white;
  border-radius: 50%;
  background: #4CA5D0;
  overflow: hidden;
}
.elem:after,
.elem:before {
  content: "top_text";
  position: absolute;
  transition: all 0.3s ease-in;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elem:after {
  content: "bottom_text";
  transform: translateY(100%);
}
.elem:hover:before {
  transform: translateY(-100%);
}
.elem:hover:after {
  transform: translateY(0);
}
:lang(es) .elem:before {
  content: "texto_superior";
}
:lang(es) .elem:after {
  content: "texto_inferior";
}

<div class="elem"></div>
<button id="change-lang">Cambiar a Español</button>

CSS将效果滑入容器

要记住一点细节：

3 个答案: