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

本文转载自查看原文 2020-04-12 13:21 716 css

前言

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

规则

1.ease 对应自定义cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢；
在这里插入图片描述
2.linear 对应自定义cubic-bezier(0,0,1,1)，效果为匀速直线；
[外链图片转存失败(img-4sRmggcg-1565665642991)()]

3.ease-in 对应自定义cubic-bezier(.42,0,1,1),效果为先慢后快；
在这里插入图片描述

4.ease-out 对应自定义cubic-bezier(0,0,.58,1),效果为先快后慢；
在这里插入图片描述

5.ease-in-out 对应自定义cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。
在这里插入图片描述

用法

<!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>

最后附上我的个人网站：www.ydhtml.com

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 贝塞尔曲线贝塞尔曲线 MATLAB 贝塞尔曲线贝塞尔曲线基本用法关于贝塞尔曲线的故事贝塞尔曲线扫盲贝塞尔曲线初探贝塞尔曲线的理解 Unity贝塞尔曲线谈谈贝塞尔曲线