CSS构建电影开场常见文本标题飞入介绍动画

Fly In Movie Title

css, move, 文本效果

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body {
    background-color: #111;
    background-image: radial-gradient(#333, #111);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    width: 100vw;
    font-weight: 700;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
#fly-in {
    font-size: 4em;
    margin: 40vh auto;
    height: 20vh;
    text-transform: uppercase;
}
#fly-in span {
    display: block;
    font-size: .4em;
    opacity: .8;
}
#fly-in div {
    position: absolute;
    margin: 2vh 0;
    opacity: 0;
    left: 10vw;
    width: 80vw;
    animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) {
    animation-delay: 4s
}
#fly-in div:nth-child(3) {
    animation-delay: 8s
}
#fly-in div:nth-child(4) {
    animation-delay: 12s
}
#fly-in div:nth-child(5) {
    animation-delay: 16s
}
#fly-in div:nth-child(6) {
    animation-delay: 20s
}
#fly-in div:nth-child(7) {
    animation-delay: 24s
}
#fly-in div:nth-child(8) {
    animation-delay: 28s
}
@keyframes switch {
    0% {
        opacity: 0;
        filter: blur(20px);
        transform: scale(12)
    }
    3% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1)
    }
    10% {
        opacity: 1;
        filter: blur(0);
        transform: scale(.9)
    }
    13% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(.1)
    }
    80% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

HTML

Fly In Movie Title

css, move, 文本效果

编辑器支持Emmet

快捷键

Fly In Movie Title

css, move, 文本效果

使用CSS3 clip-path实现的标题文本水纹波动动画特效

纯CSS构建的三维螺旋文本动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：