分享一款在线贝塞尔曲线调试器

前言

  介于很多前端小伙伴对于css3的动画的运动速度不太理解，今天就分享一款可以在线调试的贝塞尔曲线，附上链接，http://cubic-bezier.com/#.17,.67,.83,.67

规则

1. ease  对应自定义cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢； 
1

2. linear  对应自定义cubic-bezier(0,0,1,1)，效果为匀速直线； 
2

3. ease-in  对应自定义cubic-bezier(.42,0,1,1),效果为先慢后快； 
3

4. ease-out  对应自定义cubic-bezier(0,0,.58,1),效果为先快后慢； 
4

5. ease-in-out  对应自定义cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。 
5

用法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>demo</title>

  <style>
    .linear {
      width: 50px;
      height: 50px;
      background-color: #ff0000;
      -webkit-transition:  all 2s linear;
         -moz-transition:  all 2s linear;
           -o-transition:  all 2s linear;
              transition:  all 2s linear;
    }
    .linear:hover {
      -webkit-transform:  translateX(100px);
         -moz-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }

    .custom {
      width: 50px;
      height: 50px;
      background-color: #00ff00;
      -webkit-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
         -moz-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
           -o-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
              transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
    }
    .custom:hover {
      -webkit-transform:  translateX(200px);
         -moz-transform:  translateX(200px);
           -o-transform:  translateX(200px);
              transform:  translateX(200px);
    }
  </style>
</head>
<body>
  <div class="linear"></div>
  <div class="custom"></div>
</body>
</html>
posted @   xosg  阅读(1180)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae