CSS 文本转换过渡

Question

我想在 div 上制作类似于该效果的第一部分（“HOVER ME”）的效果。在我的例子中，当鼠标悬停在 div 上时，我希望第一个文本向下移动，另一个从上方出现，但没有单独的字母，并且与第一个变换效果完全一样。我还想在用户将鼠标从顶部移开时进行反向转换。我的大问题是我不了解 Haml 和 SASS，所以我希望有人帮助在 HTML 和 CSS.

中开发这种效果

Haml 代码：

%a.h-button.centered{'data-text'=>"Hover me","href"=>"#","aria-label"=>"#{word}"}
- word.split(//).each do |letter|
%span #{letter}

SASS代码：

@import url('https://fonts.googleapis.com/css?family=Roboto:900')
$letters: 6

body
  background: #111
  
a
  font-family: 'Roboto', sans-serif
  font-weight: 900
  color: black
  text-decoration: none
  
.centered
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
.h-button
  background: white
  padding: 20px
  width: 250px
  text-align: center
  
  span
    display: inline-block
    min-width: 0.30em
    text-transform: uppercase
    transition: .25s cubic-bezier(0.5,-1, 0.5, 2)
    opacity: 0
    transform: translate(0,-20px)
    
  &:before
    content: attr(data-text)
    position: absolute
    width: 100%
    left: 0
    transition: .25s cubic-bezier(0.5,-1, 0.5, 2)
    text-transform: uppercase
    letter-spacing: 3.5px
    opacity: 1
    transform: translate(0,0px)
    
  &:hover,&:focus
    &:before
      opacity: 0
      transform: translate(0, 20px) 
  
    span
      opacity: 1
      transform: translate(0, 0)
   
    @for $i from 1 through $letters
      span:nth-child(#{$i})
        transition-delay: 0.025s * $i

Example Effect

Answer 1

您必须编译源代码才能使用它的内容，

这是您的源代码的编译版本。

@import url("https://fonts.googleapis.com/css?family=Roboto:900");
body {
  background: #111;
}

a {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  color: black;
  text-decoration: none;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.h-button {
  background: white;
  padding: 20px;
  width: 250px;
  text-align: center;
}
.h-button span {
  display: inline-block;
  min-width: 0.3em;
  text-transform: uppercase;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
.h-button:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  opacity: 1;
  transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
  opacity: 0;
  transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
  opacity: 1;
  transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
  transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
  transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
  transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
  transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
  transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
  transition-delay: 0.15s;
}

<a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>s</span>
</a>

CSS 文本转换过渡

CSS text transform transition

html

css

sass

haml