CSS3-第二节CSS3过渡和2D转换-CFANZ编程社区

CSS3过渡和2D转换

1.CSS3 过渡
使用过渡可以让元素的样式从一种状态变换到另外一种状态
语法：

 transition: 要过渡的属性 花费时间 运动曲线 何时开始;

如果有很多的属性想做过渡的话，可以使用all
运动曲线：
linear：匀速
ease：逐渐慢下来
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
例如：
当鼠标经过时，盒子的宽和高都变化
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3过渡效果</title>
    <style>
        /*谁做过渡给谁加transition*/
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            /*使用过渡效果*/
            /*transition: 要过渡的属性  花费时间  运动曲线  何时开始;*/
            transition: width .5s linear ,background-color .5s ease ,height .5s ease-in-out ;
            /*想同时变化多个样式，不要写多个transition，只需要利用逗号进行分割，或者用以下的方法*/
            /*transition: all .5s ease 1s;*/
        }
        /*之前做法*/
        .box:hover {
            width: 400px;
            height: 400px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

过渡小案例：进度条
效果：
在这里插入图片描述
鼠标经过后：

思路：当鼠标经过父盒子时，让子盒子的宽度增大
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .father {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
            margin: 100px auto;
        }
        .son {
            width: 50%;
            height: 100%;
            border-radius: 7px;
            background-color: red;
            transition: all .5s linear;
        }
        .father:hover .son{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

2 2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，转换（transform）你可以简单理解为变形

2.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

在这里插入图片描述
这里是以浏览器的左上方为坐标原点，向右、向下为X、Y的正值，反之为负值

2.2 移动translate

语法

transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);

注意点：
定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果

我们可以使用该属性移动元素，或者做一些小动画效果，例如：
效果：
在这里插入图片描述
红色盒子添加了translate，相对绿色盒子实现移动，蓝色盒子添加了一个鼠标经过事件，效果为：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transform: translate(500px,100px);
            /*transform: translateX(100px);*/
            /*transform: translateY(100px);*/
        }
        .box_1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .anli {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 200px auto;
            transition: all .5s;
        }
        .anli:hover {
            transform: translate(0px,-10px);
            box-shadow: 10px 10px 10px 10px rgba(0,0,0,.6);
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box_1"></div>
<div class="anli"></div>
</body>
</html>

2.3 旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数)

注意点：
rotate里面跟度数，单位是 deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

例如：
让一个盒子转成菱形，搭配着过渡做一个简单的动画，鼠标经过旋转，效果如下：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transform: rotate(45deg);
        }
        img {
            display: block;
            width: 200px;
            height: 200px;
            margin: 300px auto;
            transition: all 2s;
            border-radius: 50%;
            border: 1px solid red;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div></div>
<img src="img/pic.jpg" alt="">
</body>
</html>

2.4 转换的中心点transform-origin
我们可以设置元素转换的中心点
语法：

transform-origin: x y;

X Y 可以是像素，百分比或者方位名词

可以通过设置不同的转换中心点，实现不同的效果，例如当鼠标经过时让一个子盒子从父盒子的左下方逆时针旋转出来。
效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .far {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: #00FFFF;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            color: #fff;
            transform-origin: 0 100%;
            transform: rotate(90deg);
            transition: all 1s;
        }
        .far:hover .son{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
<div class="far">
    <div class="son">传媒</div>
</div>
</body>
</html>

2.5 缩放scale
给元素添加缩放属性可以实现元素的方法或者是缩小
语法：

transform:scale(x,y);

注意其中的x和y用逗号分隔
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

例如，可以利用缩放做一个鼠标经过元素变大的分页按钮
效果：
在这里插入图片描述
实现的方法就是，当鼠标经过，给该元素添加缩放属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid green;
            text-align: center;
            line-height: 50px;
            transition: all 1s;
            float: left;
            margin: 20px;
            cursor: pointer;
        }
        div:hover {
            transform: scale(1.3);
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>