CSS3 3D阶梯文本悬停效果

CSS Perspective Text Hover 使用CSS3 Perspective属性实现的3D台阶效果的文本样式。

CSS3，文本特效

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2874
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background-color: #5138BE;
    height: 100%;
}
body {
    color: #FFFFFF;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
/*
** Apply styles to the parent element
*/

.Words {
    margin: 0 auto;
    padding: 80px 0;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -webkit-font-kerning: normal;
    -webkit-text-size-adjust: 100%;
}
/*
** Apply common styles to each line of text
*/

.Words-line {
    height: 50px;
    overflow: hidden;
    position: relative;
}
.Words-line:nth-child(odd) {
    -webkit-transform: skew(60deg, -30deg) scaleY(0.66667);
    transform: skew(60deg, -30deg) scaleY(0.66667);
}
.Words-line:nth-child(even) {
    -webkit-transform: skew(0deg, -30deg) scaleY(1.33333);
    transform: skew(0deg, -30deg) scaleY(1.33333);
}
.Words-line:nth-child(1) {
    left: 29px;
}
.Words-line:nth-child(2) {
    left: 58px;
}
.Words-line:nth-child(3) {
    left: 87px;
}
.Words-line:nth-child(4) {
    left: 116px;
}
.Words-line:nth-child(5) {
    left: 145px;
}
.Words-line:nth-child(6) {
    left: 174px;
}
.Words-line:nth-child(7) {
    left: 203px;
}
/*
** Fine-grained text styles
*/

p {
    height: 50px;
    line-height: 45px;
    padding: 0 10px;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    vertical-align: top;
    white-space: nowrap;
}
/*
** The hover interaction
*/

.Words:hover p {
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
}

HTML

CSS Perspective Text Hover 使用CSS3 Perspective属性实现的3D台阶效果的文本样式。

CSS3，文本特效

编辑器支持Emmet

快捷键

CSS Perspective Text Hover 使用CSS3 Perspective属性实现的3D台阶效果的文本样式。

CSS3，文本特效

HTML5/CSS3雾状波动的文本效果

CSS3 文本特效 - 风之阴影

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：