我想在https://wesbos.com站点中实现效果
在第一行中,文本不断变化,并在悬停时以很酷的风格扩展。我只有基本的 css 知识。因此,任何实现相同目标的指针或代码笔都会有所帮助。
试试下面的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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句