前言
逛博客的时候看到一个比较好玩的动效，鼠标悬停在标题时，平滑分离，移开时平滑靠拢，于是实现了一下，纯html+css
代码
html部分
<span class="dev-test">
<b class="dev-test dev-front">
<i>1</i>
</b>
<span class="dev-test dev-test-line">|</span>
<b class="dev-test dev-after">
<i>0</i>
</b>
<span class="dev-test dev-test-title">
标题
</span>
</span>
css部分
.dev-test {
font-family: "arial black";
font-size: large;
margin-left: 20px;
transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test .dev-test-line {
transform: rotateZ(22deg);
position: absolute;
margin-left: 10px;
margin-top: -1px;
z-index: 100;
}
.dev-test .dev-front {
position: absolute;
margin-left: 0px;
z-index: 0;
transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test .dev-after {
position: absolute;
margin-left: 10px;
z-index: 0;
transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test .dev-test-title {
margin-left: 30px;
transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test:hover .dev-front {
margin-left: -10px;
}
.dev-test:hover .dev-after {
margin-left: 20px;
}
.dev-test:hover .dev-test-title {
margin-left: 40px;
}
我很喜欢这个效果，记录一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153519.html
