CSS元素自由落体（牌子翻落）动画模拟

free fall in css

css, gravity

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}

body, html {
    background: #282C34;
    color: #fff;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brick {
    width: 350px;
    transform-style: preserve-3d;
    perspective: 900px;
    &__header {
        padding: 20px;
        border-radius: 5px 5px 0 0;
        border: 1px solid #F6F3E8;
        border-bottom: 1px solid #F6f3e8;
    }
    &__title {
        font-size: 25px;
        line-height: 27px;
        margin-bottom: 10px;
    }
    &__subtitle {
        display: block;
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 5px;
    }
    &__link {
        display: block;
        color: #299fff;
        margin-bottom: 10px;
        text-decoration: none;
    }
    &__footer {
        padding: 20px;
        border-radius: 0 0 5px 5px;
        position: relative;
        border: 1px solid #F6F3E8;
        border-top: 0;
        transform-style: preserve-3d;
        transform-origin: 0 0;
        animation-duration: 1.5s;
        animation-timing-function: linear;
        transform: rotateX(-268deg);
        animation-fill-mode: forwards;
        transition: opacity .1s;
        opacity: 0;
    }
    &:hover {
        .brick__footer {
            opacity: 1;
            animation-name: freefall;
        }
    }
}

@keyframes freefall {
    0% {
        transform: rotateX(-268deg);
    }
    20% {
        transform: rotateX(-390deg);
    }
    40% {
        transform: rotateX(-330deg);
    }
    60% {
        transform: rotateX(-370deg);
    }
    80% {
        transform: rotateX(-350deg);
    }
    100% {
        transform: rotateX(-360deg);
    }
}

HTML

free fall in css

css, gravity

编辑器支持Emmet

快捷键

free fall in css

css, gravity

SVG CSS3恐怖而惊艳的脸皮融化（面膜剥落）动画

纯CSS实现的纸卡（扑克牌）选择动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：