Question

所以，我想用导航栏执行以下操作：

悬停时，该项目消失，并由具有不同颜色的相同文本替换。

后动画我想要不同的东西（例如360度旋转），然后原始跨度附加。

我可以让第一个动画工作，但不能改变第一个动画后会发生的事情。

工作JS小提琴：

css：

.nav-item {
  padding: 0 15px;
  border: 0;
  margin-left:-12px;
  margin-right:-12px;
}

.nav-item span {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.nav-item > a > span {
  font-family: Montserrat, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}
.nav-item > a:before,
.nav-item > a:after {
  font-family: Montserrat, serif;
  font-size: 16px;
  line-height: 24px;
  color: lightblue;
  text-transform: uppercase;
  content: '';
  position: absolute;
  text-align: center;
  opacity: 0;
  transition: all .2s ease;
}


.nav-item > a:before {
  font-family: Montserrat, serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  content: attr(data-hover);
/*  -webkit-transform: translate(0,150%);
  -moz-transform: translate(0,150%);
  -ms-transform: translate(0,150%);
  -o-transform: translate(0,150%);*/
  transform: translateY(150%);
}


.nav-item > a:after {
  opacity: 0;
  content: attr(data-hover);
    -webkit-transform: translate(0,150%);
  -moz-transform: translate(0,150%);
  -ms-transform: translate(0,150%);
  -o-transform: translate(0,150%);
  transform: rotate(-180deg);
}

.nav-item > a:hover span,
.nav-item > a:active span {
  opacity: 0;
}

.nav-item > a:hover:before {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}
.nav-item > a:active:after {
  opacity: 0;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

.nav-item > a:active:before {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

Answer 1

如果我理解正确，你想做一套动画。

如果是这种情况，您可以使用CSS animations

完成任务

CSS动画前后不同

1 个答案: