如何实现下面的css动画效果

Question

我想在https://wesbos.com网站

上达到效果

第一行中的文本不断变化，并且在悬停时以凉快的样式扩展。我只有基本的CSS知识。因此，任何指针或代码笔都可以达到相同的效果。

Answer 1

尝试以下CSS

$(".flash").hover(function(){
var j = 1;
var i = 264;

 setInterval(function(){  
    
    $(".flash span:nth-child(" + j + ")").css("z-index", ""+ i +"");      i = i + 1;
     j = j + 1;
     if(j == 7)
     {
        j = 1;
     }
    }, 1000);
   
});

span.flash {
    background: #ecd018;
    padding: 1px 1px;
    display: inline-block;
    width: 200px;
    text-align: center;
    position: relative;
}

span.flash i {
    visibility: hidden;
}

span.flash span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background: #ecd018;
    transition: top 0.2s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    line-height: 50px;
}

span.flash span:first-child {
    display: inline;
    z-index: 1;
}

span.flash:hover,
span.flash.open {
    background: none;
}

span.flash:hover span,
span.flash.open span {
    transition: all 0.2s;
    top: auto;
}

span.flash:hover span.designer,
span.flash.open span.designer {
    top: -96px;
    -webkit-transform: perspective(100px) rotateX(20deg);
    transform: perspective(100px) rotateX(20deg);
}

span.flash:hover span.developer,
span.flash.open span.developer {
    top: -44px;
    -webkit-transform: perspective(100px) rotateX(-20deg);
    transform: perspective(100px) rotateX(-20deg);
}

span.flash:hover span.entrepreneur,
span.flash.open span.entrepreneur {
    -webkit-transform: perspective(100px) rotateX(20deg);
    transform: perspective(100px) rotateX(20deg);
    top: 0;
}

span.flash:hover span.speaker,
span.flash.open span.speaker {
    top: 52px;
    -webkit-transform: perspective(100px) rotateX(-20deg);
    transform: perspective(100px) rotateX(-20deg);
}

span.flash:hover span.teacher,
span.flash.open span.teacher {
    -webkit-transform: perspective(200px) rotateX(40deg);
    transform: perspective(200px) rotateX(40deg);
    top: 92px;
}

.breif img {
    margin-right: 30px;
}

@media (max-width: 1100px) {
    .blogPost {
        width: 48%;
        margin: 1%;
    }
    .welcome .welcomeText {
        background: rgba(255, 255, 255, 0.48);
        margin-left: 340px;
        padding-left: 20px;
        padding-bottom: 10px;
    }
    span.flash {
        transition: all 0.2s;
    }
    span.flash:hover {
        -webkit-transform: translateY(90px);
    }
    .bar {
        font-size: 16px;
    }
    .bar input[type="email"] {
        width: 120px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="flash">
      <i>Developer</i>
      <span class="designer" style="z-index: 265;">Designer</span>
      <span class="developer" style="z-index: 266;">Developer</span>
      <span class="entrepreneur" style="z-index: 262;">Entrepreneur</span>
      <span class="speaker" style="z-index: 263;">Speaker</span>
      <span class="teacher" style="z-index: 264;">Teacher</span>
    </span>

Answer 2

.welcome p {
  font-size: 30px;
  font-family: "Raleway", serif;
}
.welcome p.subtext {
  font-size: 20px;
}
span.flash {
  background: #ecd018;
  padding: 1px 1px;
  display: inline-block;
  width: 200px;
  text-align: center;
  position: relative;
}
span.flash i {
  visibility: hidden;
}
span.flash span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background: #ecd018;
  transition: top 0.2s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  line-height: 50px;
}
span.flash span:first-child {
  display: inline;
  z-index: 1;
}
span.flash:hover,
span.flash.open {
  background: none;
}
span.flash:hover span,
span.flash.open span {
  transition: all 0.2s;
  top: auto;
}
span.flash:hover span.designer,
span.flash.open span.designer {
  top: -96px;
  -webkit-transform: perspective(100px) rotateX(20deg);
  transform: perspective(100px) rotateX(20deg);
}
span.flash:hover span.developer,
span.flash.open span.developer {
  top: -44px;
  -webkit-transform: perspective(100px) rotateX(-20deg);
  transform: perspective(100px) rotateX(-20deg);
}
span.flash:hover span.entrepreneur,
span.flash.open span.entrepreneur {
  -webkit-transform: perspective(100px) rotateX(20deg);
  transform: perspective(100px) rotateX(20deg);
  top: 0;
}
span.flash:hover span.speaker,
span.flash.open span.speaker {
  top: 52px;
  -webkit-transform: perspective(100px) rotateX(-20deg);
  transform: perspective(100px) rotateX(-20deg);
}
span.flash:hover span.teacher,
span.flash.open span.teacher {
  -webkit-transform: perspective(200px) rotateX(40deg);
  transform: perspective(200px) rotateX(40deg);
  top: 92px;
}

<p class="desc" style="margin-top:100px">I'm a
    <span class="flash">
      <i>Developer</i>
      <span class="designer" style="z-index: 35;">Designer</span>
      <span class="developer" style="z-index: 36;">Developer</span>
      <span class="entrepreneur" style="z-index: 37;">Entrepreneur</span>
      <span class="speaker" style="z-index: 38;">Speaker</span>
      <span class="teacher" style="z-index: 34;">Teacher</span>
    </span> making the web an awesome place.</p>