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

Question

我想在https://wesbos.com站点中实现效果

在第一行中，文本不断变化，并且在悬停时以一种很酷的风格扩展。我只有基本的 CSS 知识。因此，任何实现相同目的的指针或代码笔都会有所帮助。

标签： htmlcsssass

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>