web前端学习笔记11

news2024/11/18 17:31:20

11. CSS3高级特效

11.1 CSS3变形

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

语法

transform:[transform-function] ; 
/* 设置变形函数，可以是一个，也可以是多个，中间以空格分开*/

11.2 变形函数

函数名称	说明
translate()	平移函数，基于X、Y坐标重新定位元素的位置
scale()	缩放函数，可以使任意元素对象尺寸发生变化
rotate()	旋转函数，取值是一个度数值
skew()	倾斜函数，取值是一个度数值

浏览器的兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
2D transform	9+	3.5+	4.0+	10.5+	3.1+

11.3 2D位移

translate 是相对于元素本身的位置进行左右，上下平移
语法
```
translate(tx,ty);
```
tx: X轴（横坐标）移动的向量长度，可以是负数
ty: Y轴（横坐标）移动的向量长度，可以是负数

案例代码

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>translate</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      ul {
       
        overflow: hidden;
        margin: 20px auto;
        width: 980px;
        border: 1px solid #000;
        padding: 20px;
      }
      li {
       
        float: left;
        margin-right: 10px;
      }
      a {
       
        display: block;
        background-color: #f7ae66;
        height: 40px;
        border-radius: 5px;
        line-height: 40px;
        width: 90px;
        color: #fff;
        text-align: center;
        transition: all 0.1s linear;
      }
      a:hover {
       
        background-color: rgba(242, 88, 6, 0.87);
        /* transform: translate(4px, 8px); */
        transform: translateX(4px) translateY(8px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
      </ul>
    </div>
  </body>
</html>

效果图

11.4 2D缩放

scale是元素进行缩放变形函数
语法
```
scale(sx,sy);
```
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
scaleX(sx)：表示只设置X轴的缩放
scaleY(sy)：表示只设置Y轴的缩放

案例代码

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>scale</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      ul {
       
        overflow: hidden;
        margin: 20px auto;
        width: 980px;
        border: 1px solid #000;
        padding: 20px;
      }
      li {
       
        float: left;
        margin-right: 10px;
      }
      a {
       
        display: block;
        background-color: #f7ae66;
        height: 40px;
        border-radius: 5px;
        line-height: 40px;
        width: 90px;
        color: #fff;
        text-align: center;
        transition: all 0.1s linear;
      }
      a:hover {
       
        background-color: rgba(242, 88, 6, 0.87);
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li>