水平对半切分屏幕的动画

Animate section out by splitting it horizontally in half

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
    font-family: "Open Sans", sans-serif;
}
h1,
h3 {
    text-align: center;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.toggle {
    position: relative;
    z-index: 90;
}
.deck {
    width: 100%;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
}
.deck:before,
.deck:after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    background: #eb1f48;
    transition: transform 1s ease;
}
.deck:before {
    top: 0;
}
.deck:after {
    bottom: 0;
}
.deck.is-over:before {
    transform: translate3d(-100vw, 0, 0);
}
.deck.is-over:after {
    transform: translate3d(100vw, 0, 0);
}
.text {
    width: 5em;
    height: 3em;
    z-index: 20;
    font-family: sans-serif;
    font-size: 120px;
    line-height: 1em;
    font-weight: 700;
    color: #fff;
}
.text:before,
.text:after {
    content: attr(title);
    display: block;
    overflow: hidden;
    transition: transform 1s ease;
}
.text:before {
    height: 1.5em;
    position: relative;
    z-index: 20;
}
.is-over .text:before {
    transform: translate3d(-100vw, 0, 0);
}
.text:after {
    width: inherit;
    padding-bottom: .09em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    vertical-align: bottom;
    clip: rect(1.5em auto auto auto);
}
.is-over .text:after {
    transform: translate3d(100vw, 0, 0);
}

HTML

Animate section out by splitting it horizontally in half

编辑器支持Emmet

快捷键

Animate section out by splitting it horizontally in half

HTML5带气泡浮起动画背景的登录屏幕

HTML5 WebGL屏幕闪屏（电视机花屏）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：