CSS3 页面标题入场的同时发生字符串变化

通过巧妙的字符串拆分组合和CSS3动画来实现的这个文本变换效果。

css3, text, effect

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100);
html,
body {
    height: 100%;
    background: #122121;
}
.anview-logo {
    font-family: 'lato', sans-serif;
    width: 256px;
    height: 60px;
    left: 50%;
    top: 30%;
    margin-top: -30px;
    margin-left: -128px;
    position: absolute;
    animation: logo 5s ease;
}
@keyframes logo {
    from {
        transform: translateY(300px) scale(1.7);
    }
    40% {
        transform: translateY(110px) scale(1.3);
    }
    70% {
        transform: translateY(110px) scale(1.3);
    }
}
.anview-logo span {
    position: absolute;
    font-size: 64px;
    color: #fff;
    line-height: 60px;
}
.anview-logo span:nth-child(1) {
    font-size: 32px;
    width: inherit;
    text-align: center;
    margin-top: -55px;
    color: rgba(255, 255, 255, 0.6);
    animation: weare 5s ease;
}
@keyframes weare {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    40% {
        opacity: 0;
    }
    70% {
        opacity: 0;
        transform: translateY(-40px);
    }
}
.anview-logo span:nth-child(2) {
    font-size: 28px;
    width: inherit;
    text-align: center;
    opacity: 0;
    margin-top: -55px;
    color: rgba(255, 255, 255, 0.6);
    animation: weprovide 5s ease;
}
@keyframes weprovide {
    from {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
}
.anview-logo span:nth-child(3) {
    left: 13px;
    animation: a 5s ease;
    transform: translateX(0px);
}
@keyframes a {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: translateX(-90px);
    }
}
.anview-logo span:nth-child(4) {
    left: 54px;
    animation: n 5s ease;
    transform: translateX(0px);
}
@keyframes n {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: translateX(-70px);
    }
}
.anview-logo span:nth-child(5) {
    left: 30px;
    opacity: 0;
    animation: ice 5s ease;
}
@keyframes ice {
    from {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
}
.anview-logo span:nth-child(6) {
    left: 102px;
    animation: view 5s ease;
    transform: translateX(0px);
}
@keyframes view {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    40% {
        opacity: 1;
    }
    70% {
        transform: translateX(60px);
    }
}

HTML

通过巧妙的字符串拆分组合和CSS3动画来实现的这个文本变换效果。

css3, text, effect

编辑器支持Emmet

快捷键

通过巧妙的字符串拆分组合和CSS3动画来实现的这个文本变换效果。

css3, text, effect

CSS3 从中间溅开来的页面入场动画

纯CSS3实现的画布外菜单（入场时带边角变形动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：