CSS学习笔记之高级教程(二)

10、CSS 3D 转换

通过 CSS transform 属性,您可以使用以下 3D 转换方法:

  • rotateX()
  • rotateY()
  • rotateZ()

10.1 rotateX() 方法(使元素绕其 X 轴旋转给定角度)

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    /* div{
      position: absolute;
    } */
    div.ex1 {
     
     
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
    }

    div.ex2 {
     
     
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateX(50deg);
    }
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
    <div class="ex2"></div>
   </div>
</body>

</html>

运行效果:
在这里插入图片描述

10.2 rotateY() 方法(使元素绕其 Y 轴旋转给定角度)

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateY(50deg);
    }

10.3 rotateZ() 方法(方法使元素绕其 Z 轴旋转给定角度)

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateZ(50deg);
    }

11、CSS 过渡

  • CSS 过渡允许您在给定的时间内平滑地改变属性值。

如需创建过渡效果,必须明确两件事:

  • 您要添加效果的 CSS 属性
  • 效果的持续时间

在这里插入图片描述

示例:

  • transition: width 2s,height 2s;
  • transition: width 2s;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    /* div{
      position: absolute;
    } */
    div.ex1 {
     
     
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
      transition: width 2s;
    }

    div.ex1:hover{
     
     
      width: 400px;
    }

   
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
   </div>
</body>

</html>

运行效果:
鼠标放置元素上后,元素宽度会从200px 平滑增加到 400px,动画效果持续2秒钟

11.2 transition-timing-function(规定过渡效果的速度曲线)

transition-timing-function 属性可接受以下值:

  • ease - 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认)
  • linear - 规定从开始到结束具有相同速度的过渡效果
  • ease-in -规定缓慢开始的过渡效果
  • ease-out - 规定缓慢结束的过渡效果
  • ease-in-out - 规定开始和结束较慢的过渡效果
  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

11.3 transition-delay (规定过渡效果的延迟(以秒计))。

div {
  transition-delay: 1s;
}

11.4 过渡 + 转换

div {
  transition: width 2s, height 2s, transform 2s;
}

11.5 简写的 transition 属性

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

可简写为:

div {
  transition: width 2s linear 1s;
}

12、CSS 动画

12.1 @keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效,必须将动画绑定到某个元素。

  • animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性,则动画不会发生,因为默认值是 0s(0秒)

12.2 from、to关键词使用:

下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟,同时将 <div> 元素的背景颜色从 “red” 逐渐改为 “yellow”:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.ex1 {
     
     
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {
     
     
      from {
     
     
        background-color: red;
      }

      to {
     
     
        background-color: yellow;
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值