第十一讲_css过渡

css过渡

  • 1. 过渡介绍
  • 2. 过渡属性
    • 2.1 transition-property
    • 2.2 transition-duration
    • 2.3 transition-delay
    • 2.4 transition-timing-function

1. 过渡介绍

上一篇博客中介绍的转换(transform),从一种样式直接变成另一种样式,没有中间的过程。过渡(transition)则是让元素从一种样式平滑过渡到另一种样式。

2. 过渡属性

2.1 transition-property

定义哪些属性需要过渡。支持的取值:

  • none:不过渡任何属性
  • all:支持过渡的所有属性(默认值)
  • 指定具体属性名(值为数字或可以转换为数字的属性才支持过渡)

2.2 transition-duration

设置过渡的持续时间,单位为秒(s)或毫秒(ms)。

2.3 transition-delay

设置过渡的延迟时间,单位为秒(s)或毫秒(ms)。

2.4 transition-timing-function

设置过渡的类型,支持的取值:

  • linear:以匀速进行过渡
  • ease:以慢速开始,然后变快,然后慢速进行过渡
  • ease-in:以慢速开始进行过渡
  • ease-out:以慢速结束进行过渡
  • ease-in-out:以慢速开始和结束进行过渡
  • cubic-bezier(n,n,n,n) :用贝塞尔曲线表示速度的变化进行过渡
<html>
  <style>
    .container {
      width: 1000px;
      height: 600px;
      border: 1px black solid;
    }
    
    .container:hover  .child{
      width: 1000px;
      transition-property: all;
      transition-duration: 5s;
      transition-delay: 1s;
    }

    .child {
      height: 100px;
      width: 100px;
    }

    .container1 {
      background-color: red;
      transition-timing-function: linear;
    }
    .container2 {
      background-color: green;
      transition-timing-function: ease;
    }
    .container3 {
      background-color: blue;
      transition-timing-function: ease-in;
    }
    .container4 {
      background-color: gold;
      transition-timing-function: ease-out;
    }
    .container5 {
      background-color: gray;
      transition-timing-function: ease-in-out;
    }
    .container6 {
      background-color: aqua;
      transition-timing-function: cubic-bezier(.6,.66,.8,.88);
    }
   
  style>

  <div class="container">
    <div class="container1 child">div>
    <div class="container2 child">div>
    <div class="container3 child">div>
    <div class="container4 child">div>
    <div class="container5 child">div>
    <div class="container6 child">div>
  div>

html>

ps:运行上述代码,将鼠标移到黑色框内,观察不同的过渡类型之间的差异。

贝塞尔曲线可以通过工具调节:贝塞尔曲线工具

你可能感兴趣的:(CSS样式,css,前端,css3)