CSS3 cubic-bezier 函数功能演示

分别演示x、y轴线和曲线的运动轨迹。

css3, animation

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font: normal 15px/1.9em 'Merriweather', Georgia, serif;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-color: #f4f4f6;
}
.post-demo-content {
    padding: 2em 2em 2em 4em;
}
.mnc-demo-container {
    height: 100px;
    width: 100px;
}
.mnc-demo-container-inline {
    display: inline-block;
    position: relative;
    margin-right: 60px;
    margin-bottom: 30px;
    margin-top: 15px;
    text-align: left;
}
.mnc-demo-container-inline:last-child {
    margin-right: 0;
}
.mnc-demo-label {
    position: absolute;
    bottom: -38px;
    color: #666;
    font-size: 11px;
    text-align: center;
    width: 100%;
}
.mnc-demo-grid {
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 100%;
}
.mnc-demo-line {
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
}
.mnc-demo-line-vertical {
    width: 2px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
}
.mnc-demo-dot {
    will-change: transform;
    -webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
    animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
    position: absolute;
    bottom: -10px;
    left: -10px;
}
.mnc-demo-dot:after {
    content: '';
    display: block;
    will-change: transform;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
.mnc-demo-dot-final::after {
    -webkit-animation: none;
    animation: none;
}
.mnc-demo-container-inline .mnc-demo-dot:after {
    background-color: #333;
}
.mnc-demo-dot-final-x {
    -webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
    animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.mnc-demo-dot-final-y {
    -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
    animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
@-webkit-keyframes xAxis {
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}
@keyframes xAxis {
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}
@-webkit-keyframes yAxis {
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}
@keyframes yAxis {
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

HTML

</div>
    <div class="mnc-demo-container mnc-demo-container-inline">

<span class="mnc-demo-label">Y movement</span>
        <div class="mnc-demo-grid">
            <div class="mnc-demo-line" style="top: 20px;"></div>
            <div class="mnc-demo-line" style="top: 40px;"></div>
            <div class="mnc-demo-line" style="top: 60px;"></div>
            <div class="mnc-demo-line" style="top: 80px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 20px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 40px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 60px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 80px;"></div>
        </div>

</div>
    <div class="mnc-demo-container mnc-demo-container-inline">

<span class="mnc-demo-label">Curved path</span>
        <div class="mnc-demo-grid">
            <div class="mnc-demo-line" style="top: 20px;"></div>
            <div class="mnc-demo-line" style="top: 40px;"></div>
            <div class="mnc-demo-line" style="top: 60px;"></div>
            <div class="mnc-demo-line" style="top: 80px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 20px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 40px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 60px;"></div>
            <div class="mnc-demo-line-vertical" style="left: 80px;"></div>
        </div>

分别演示x、y轴线和曲线的运动轨迹。

css3, animation

编辑器支持Emmet

快捷键

分别演示x、y轴线和曲线的运动轨迹。

css3, animation

CSS3 Ease*函数功能演示/速查表

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：