CSS3之渐变，转换，过渡，动画

最新推荐文章于 2022-02-15 19:15:57 发布

oneheart初心

最新推荐文章于 2022-02-15 19:15:57 发布

阅读量220

点赞数

分类专栏： CSS 文章标签： css3 css html html5 前端

本文链接：https://blog.csdn.net/qq_34466755/article/details/109711771

版权

CSS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

1. 渐变

1.1 线性渐变

linear-gradient()函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      display: inline-block;
      width: 100px;
      height: 100px;
    }

    /* 线性渐变（默认）（上下） */
    #simple-linear {
      background: linear-gradient(blue, red);
    }

    /*线性渐变（左右） */
    #horizontal-gradient {
      background: linear-gradient(to right, blue, red);
    }

    /*线性渐变（对角线） */
    #diagonal-gradient {
      background: linear-gradient(to right bottom, blue, red);
    }

    /* 线性渐变（角度） */
    #angled-gradient {
      background: linear-gradient(90deg, blue, red);
    }

    /* 线性渐变（多种颜色+颜色终止位置） */
    #auto-spaced-linear-gradient {
      background: linear-gradient(purple 10%, red 30%, yellow 50%, green 70%, blue);
    }

    /* 颜色之间使用实线过渡（两个颜色终止点设为同一个值） */
    .striped {
      background: linear-gradient(to bottom right, cyan 50%, orangered 50%);
    }

    /* 修改渐变颜色中心点 */
    .color-hint {
      background: linear-gradient(blue, 30%, red);
    }

    /* 未修改的渐变颜色参考 */
    .simple-linear {
      background: linear-gradient(blue, red);
    }

    /* 创建渐变条纹 */
    .multiposition-stops {
      background: linear-gradient(to left,
          lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80%);
      background: linear-gradient(to left,
          lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);
    }

    /* 创建不渐变条纹 */
    .multiposition-stop2 {
      background: linear-gradient(to left,
          lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75%);
      background: linear-gradient(to left,
          lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);
    }
  </style>
</head>

<body>
  <div id="simple-linear">
  </div>
  <div id="horizontal-gradient">
  </div>
  <div id="diagonal-gradient">
  </div>
  <div id="angled-gradient">
  </div>
  <div id="auto-spaced-linear-gradient">
  </div>
  <div class="striped">
  </div>
  <div class="color-hint">
  </div>
  <div class="simple-linear">
  </div>
  <div class="multiposition-stops"></div>
  <div class="multiposition-stop2"></div>
</body>

</html>

1.2 径向渐变

radial-gradient()函数

1.3 圆锥渐变

repeating-linear-gradient()函数

2. 转换

2.1 2D转换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 12px;
      width: 100px;
      height: 100px;
      border: 1px solid;
      display: inline-block;
      background-color: tomato;
    }

    section {
      background-color: turquoise;
      margin: 10px;
      height: 200px;
    }

    span {
      position: absolute;
    }

    .translate div {
      background-color: blue;
    }

    /* 平移元素（x轴（右），y轴（下）） */
    #translate {
      transform: translate(50px, 50px);
    }

    #translateX {
      transform: translateX(50px);
    }

    #translateY {
      transform: translateY(50px);
    }

    .scale div {
      margin: 50px 100px 0 0;
      background-color: red;
    }

    /* 缩放元素（宽的倍数，高的倍数） */
    #scale {
      transform: scale(2, 2);
    }

    /* 缩放元素（宽的倍数） */
    #scaleX {
      transform: scaleX(2);
    }

    /* 缩放元素（高的倍数） */
    #scaleY {
      left: 200px;
      transform: scaleY(2);
    }

    .skew div {
      margin: 20px 0px 0 0;
      background-color: violet;
    }

    /* 旋转元素 */
    #rotate {
      transform: rotate(45deg);
    }

    .rotate div {
      margin: 20px -106px 0 0;
      background-color: green;
    }

    /* 倾斜元素 */
    #skew {
      transform: skew(0.1turn, 0.1turn);
    }

    /* 倾斜元素（X） */
    #skewX {
      transform: skewX(0.1turn);
    }

    /* 倾斜元素（Y） */
    #skewY {
      transform: skewY(0.1turn);
    }

    .matrix div {
      margin: 20px 0px 0 0;
    }

    #matrix {
      transform: matrix(1, 0.7, 0.7, 1, 100, 10);
    }
  </style>
</head>

<body>
  <section class="translate">
    <span>translate</span>
    <div id="translate">
      <span>translate(50px, 50px)</span>
    </div>
    <div id="translateX">
      <span>translateX(50px)</span>
    </div>
    <div id="translateY">
      <span>translateY(50px)</span>
    </div>
  </section>
  <section class="scale">
    <span>scale</span>
    <div id="none">
      <span>none</span>
    </div>
    <div id="scale">
      <span>scale(2, 2)</span>
    </div>
    <div id="scaleX">
      <span>scaleX(2)</span>
    </div>
    <div id="scaleY">
      <span>scaleY(2)</span>
    </div>
  </section>

  <section class="rotate">
    <span>rotate</span>
    <div id="none">
      <span>none</span>
    </div>
    <div id="rotate">
      <span>rotate(45deg)</span>
    </div>
  </section>
  <section class="skew">
    <span>skew</span>
    <div id="none">
      <span>none</span>
    </div>
    <div id="skew">
      <span>skew</span>
    </div>
    <div id="skewX">
      <span>skewX</span>
    </div>
    <div id="skewY">
      <span>skewY</span>
    </div>
  </section>
  <section class="matrix">
    <span>matrix</span>
    <div id="none">
      <span>none</span>
    </div>
    <div id="matrix">
      <span>matrix</span>
    </div>
  </section>

</body>

</html>

2.2 3D转换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    section {
      width: 300px;
      height: 300px;
      background-color: cyan;
      /* 在父元素设置透视 */
      perspective: 800px;
      /* perspective的消失点 */
      perspective-origin: left top;
      /* 设置元素的子元素是位于 3D 空间中还是平面中 */
      transform-style: preserve-3d;
    }

    .box {
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .box:hover {
      transform: translateZ(100px);
    }
  </style>
</head>

<body>
  <section>
    <div class="box"></div>
  </section>
</body>

</html>

3. 过渡

3.0如何实现一个过渡

过渡是将某个属性从一个值变为另一个值的过程。触发过渡需要一个事件。

过渡前的样式
过渡后的样式
在默认样式中添加过渡

3.1 transition-property属性

transition-property表示需要过渡的CSS属性。

transition-property:none;/*没有任何属性过渡*/
transition-property:all;/*所有属性过渡*/
transition-property:width;/*width属性过渡*/
transition-property:width height;/*width属性过渡*/

3.2 transition-duration属性

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

3.3 transition-timing-function属性

transition-timing-function

transition-timing-function:linear	/*规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。*/
transition-timing-function:ease	/*规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。*/
transition-timing-function:ease-in	/*规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。*/
transition-timing-function:ease-out	/*规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。*/
transition-timing-function:ease-in-out	/*规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。*/
transition-timing-function:cubic-bezier(n,n,n,n)	/*在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/

3.4 transition-delay属性

transition-delay:在过渡效果开始作用之前需要等待的时间。

transition-delay: 3s; /*3s后开始过渡*/
transition-delay: 2s, 4ms;/*2s 4ms 后开始过渡*/

3.5 transition属性

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
transition: all 0.5s ease-out;

一个过渡的例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      display: inline-block;
    }

    .content {
      transition-property: width, height;
      transition-duration: 2s, 1s;
      transition-timing-function: ease, ease;
      transition-delay: 100ms, 100ms;
    }

    .content:hover {
      width: 200px;
      height: 200px;
    }

    .box {
      background-color: blue;
      transition-property: background-color;
      transition-duration: 2s;
      transition-timing-function: linear;
      transition-delay: 0ms;
    }

    .box:hover {
      background-color: orange;
    }

    .container {
      width: 200px;
      height: 200px;
      background-color: orange;
      transition: all 2s linear 1s;
    }

    /*鼠标一直放在元素上*/
    .container:hover {
      margin-left: 500px;
    }

    .input {
      transition: all 1s linear 100ms;
    }

    .input:focus {
      background-color: orangered;
    }

    /*过渡前的状态*/
    .bg-blue {
      background-color: blue;
    }

    /*过渡后的状态*/
    .bg-red {
      background-color: red;
    }

    h1 {
      /*添加过渡*/
      transition: all 500ms linear 0ms;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>鼠标放在上面</span>
  </div>
  <div class="content">
    <span>鼠标放在上面</span>
  </div>
  <div class="container">
    <span>鼠标跟着移动</span>
  </div>
  <input class="input" type="text" value="鼠标点击获取焦点">
  <h1 class="bg-blue">利用JS实现过渡（点我）</h1>
  <script>
    var h1 = document.querySelector('h1')
    /*实现点击标签完成蓝-红或者红-蓝的背景色切换*/
    h1.addEventListener('click', function () {
      if (this.className === "bg-blue") {
        this.className = "bg-red"
      } else {
        this.className = "bg-blue"
      }

    })
  </script>
</body>

</html>

4. 动画

4.1animation-name属性

动画名称

4.2animation-duration属性

一个动画周期的时长

4.3animation-timing-function属性

定义CSS动画在每一动画周期中执行的节奏

animation-timing-function:linear | ease | ease-in | ease-out | ease=in-out | cubic-bezier(n,n,n,n)

4.4animation-delay属性

动画何时开始

4.5animation-iteration-count属性

动画执行次数

animation-iteration-count: infinite;/*无限循环*/
animation-iteration-count: 3;/*动画播放3次结束*/

4.6animation-direction属性

动画是否反向播放

animation-direction: normal/*动画默认方向*/
animation-direction: reverse/*反方向执行*/
animation-direction: alternate/*动画交替执行*/
animation-direction: alternate-reverse /*从反方向开始，动画交替执行*/

4.7animation-fill-mode属性

animation-fill-mode: none | backwards | forwords | both;

none
当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
backwords
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。
forwords
目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：
both
动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

4.8animation-play-state属性

定义一个动画是否运行或者暂停

animation-play-state: running;/*动画正在运行*/
animation-play-state: paused;/*动画停止*/

4.9animation属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

一个动画例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
    }

    div {
      width: 10em;
      height: 10em;
      background-color: orangered;
      display: inline-block;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-delay: 1s;
      animation-iteration-count: 3;
      /*动画正反交替执行*/
      animation-direction: alternate;
    }

    .box1 {
      animation-name: anime1;
      /*动画delay是应用初值,动画结束后应用第一个关键帧的样式*/
      animation-fill-mode: backwards;
    }

    .box2 {
      animation-name: anime1;
      /*动画delay是应用初值,动画结束后应用最后一个关键帧的样式*/
      animation-fill-mode: both;
    }

    .box3 {
      animation-name: anime2;
      /*动画结束后应用最后一个关键帧的样式（不会应用0%的样式）*/
      animation-fill-mode: forwards;
    }

    @keyframes anime1 {
      from {
        width: 5em;
        height: 5em;
      }

      to {
        height: 20em;
        width: 20em;
        background-color: orchid;
      }
    }

    @keyframes anime2 {
      from {
        width: 5em;
        height: 5em;
      }

      to {
        height: 20em;
        width: 20em;
        background-color: orchid;
      }
    }

    @keyframes anime3 {
      0% {
        width: 5em;
        height: 5em;
      }

      50% {
        width: 15em;
        height: 15em;
      }

      100% {
        width: 20em;
        height: 20em;
        background-color: orchid;
      }
    }
    div:hover {
      animation-play-state: paused;
    }
  </style>
</head>

<body>
  <section>
    <div class="box1">backwords</div>
    <div class="box2">both</div>
    <div class="box3">forwards</div>
  </section>

</body>

</html>

oneheart初心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之渐变，转换，过渡，动画

1. 渐变1.1 线性渐变linear-gradient()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt
复制链接

扫一扫