
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            transition: width 1s;
        }
        div:hover {
            width: 400px;  
        }
    </style>
</head>
<body>
    <div></div>
</body>

二、CSS3过渡练习——进度条案例

设置当鼠标移到外部盒子初时，进度条加满


<!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>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 1s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin)

转换 (transform) 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换（transform）可以简单理解为变形

移动：translate

可以该变元素在页面中的位置，类似定位。

移动盒子的位置：定位盒子的外边距 2d转换移动

语法：

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

transform: translateX(n);

transform: translateY(n);

重点：

定义2D 转换中的移动，沿着 X 和 Y轴移动元素

translate最大的优点：不会影响到其他元素的位置

translate 中的百分比单位是相对于自身元素的 translate:(50%,50%);

对行内标签没有效果

让一个盒子水平垂直居中

不使用之前的margin-top 、marfin-left 因为其需要写固定值，使用translate:(50%,50%);更好，下面是让盒子水平垂直居中的例子：


    <style>
        /* 移动盒子的位置： 定位    盒子的外边距   2d转换移动 */
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
 
        }
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)盒子往上走自己高度的一半 */
            transform: translate(-50%, -50%);
        }      
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>


    <style>
        /* 移动盒子的位置： 定位    盒子的外边距   2d转换移动 */
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x 轴上移动位置，y 就是 y轴上移动位置 ，中间用逗号隔开*/
            transform: translate(50%, 100px);
            /* 1. 只移动 x坐标 */
            /* transform: translate(100px,0); */
            /* transform: translateX(100px); */
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

旋转：rotate

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

语法：

transform: rotate(度数)

重点：

rotate 里面跟度数，单位是 deg 比如 rotate(45deg)

角度为正时，顺时针；负时，为逆时针

默认旋转的中心点是元素的中心点

旋转案例——三角形

之前使用图标字体来设置三角形，现在可以通过为div::after 设置一个小盒子，只保留需要的边框并进行旋转，即可得到三角形，还可以在鼠标移到div 时，进行旋转设置。代码如下：


    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        div::after {
            position: absolute;
            top: 8px;
            right: 15px;
            content: '';
            width: 10px;
            height: 10px;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
            transform: rotate(45deg);
            transition: all .1s;
        }
        /* 鼠标经过div 里面的三角时旋转 */
        div:hover::after {
            /* 之前已经旋转了45度，所以应该在45度的基础上再旋转180度，即45 +180=225deg */
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

设置转换中心点 transform-origin

语法：

transform-origin: x y;

重点：

注意后面的参数 x 和 y 用空格隔开

x y 默认转换的中心点是元素的中心点（50% 50%）

还可以给x y 设置像素或者方位名词（top bottom left right center）


    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            transition: all 1s;
            /* 可以跟方位名词 ，默认的是50% 50%,等价于 center center*/
            /* transform-origin: left bottom; */
            transform-origin: 50px 50px;
        }
        div:hover {
            transform: rotate(360deg);  
        }
    </style>
</head>
<body>
    <div></div>
</body>

案例：旋转案例


    <style>
        div {
            /* 一般看不到before伪元素，故溢出设置隐藏 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 0 auto;
        }
        div::before {
            display: block;
            content: '黑马';
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(-180deg);
            transform-origin: left bottom;
            transition: all .5s;            
        }
        /* 鼠标经过div 里面的before复原 */
        div:hover::before {
            transform: rotate(0);
        }
    </style>
</head>
<body>
    <div></div>
</body>

缩放：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)：缩小，小于1就是缩小

scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子


    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
        div:hover {
            /* 等比例缩放 同时修改宽度和高度，有简单的写法，
            以下是宽度修改了0.5倍，高度默认和第一个参数一样 */
            transform: scale(0.5);
            transform-origin: left top;
        }
    </style>
</head>
<body>
    <div></div>
</body>

图片放大案例


    <style>
        div {
            /* 使图片放大时超过的内容不显示 */
            overflow: hidden;
            float: left;
            margin: 10px;          
        }
        div img {
            /* 谁做过渡给谁加 */
            transition: all .4s;
        }
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
    <div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
    <div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
</body>

分页按钮案例


    <style>
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .3s;
        }
        ul li:hover {
            transform: scale(1.3);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

2D转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale( ) …等，

2. 其顺序会影响转换的效果。（先旋转会改变坐标轴的方向）

3. 当我们同时有位移和其他属性的时候，记得位移放到最前。

2D转换小结

四、CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

制作动画分为两步：

1. 先定义动画

用 keyframes 定义动画（类似定义类选择器）

2. 再使用（调用）动画


    <style>
        /* 想页面一打开，一个盒子就从左边走到右边 */
        /* 定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translate(0px);
            }
            /* 结束状态 */
            100% {
                transform: translate(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 2s;
        }     
    </style>
</head>
<body>
    <div></div>
</body>

注意：动画序列里面的百分比要为整数。

里面的百分比就是总的持续时间 （下面案例是8s）的划分


    <style>
        /* 定义动画 */
        /* 可以做多个状态的变化 keyframe关键帧 */
        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(1000px,0);
            }
            50% {
                transform: translate(1000px,500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0,0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 8s;
        }     
    </style>
</head>
<body>
    <div></div>
</body>

五、CSS3动画常见属性

动画的完成时间、速度曲线、以及何时开始的属性与过渡相同。


    <style>
        /* 想页面一打开，一个盒子就从左边走到右边 */
        /* 定义动画 */
        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            100% {
                transform: translate(1000px,0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 动画何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复  count 次数 infinite 无限的 */
            animation-iteration-count: 2;
            /* 是否反方向播放 默认的是normal 如果要反方向就用 alternate */
            animation-direction: normal;
            /* 动画结束后的状态 保持forwards  回到起始状态backwards */
            animation-fill-mode: forwards;
        }     
        div:hover {
            /* 鼠标经过div 让这个div停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束状态

简写属性里面不包含 animation-play-state

暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来，而不是直接跳回来：animation-direction: alternate;

盒子动画结束后，停在结束位置：animation-fill-mode: forwards

五、热点图案例（动画）


    <style>
        body {
            background-color: #333;
        }
        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(./media/map.png) no-repeat;
            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
        }
        .tb {
            top: 498px;
            right: 80px;
        }
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .city div[class^="pulse"] {
            /* 保证小波纹在父盒子里面水平垂直居中  放大之后就会中心向四周发散*/
            position: absolute;   
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        /* 注意选择器权重问题，之前使用的简写形式，默认animation-delay为0,
        .city div[class^="pulse"]权重为21，而如果只写.pulse2权重为10不执行
         */
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        @keyframes pulse {
            0% { }
            70% {
                /* 使用高度宽度变大盒子，而不使用scale的原因是：scale缩放时，
                同时也会将盒子的阴影放大，会导致特别大，效果不好看 故不使用transform: scale(5);*/
                width: 40px;
                height: 40px;
                /* opacity 不透明度，从0（完全透明）到 1（完全不透明）  */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

六、速度曲线之steps步长（案例——奔跑的熊大）

速度曲线


    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让文字强制一行显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成动画  有了steps 就不要再写 ease 或者 linear了 */
            animation: w 4s steps(10) forwards;
        }
        @keyframes w {
            0% {}
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div>世纪佳缘我在这里等你</div>
</body>

案例：奔跑的熊大

元素可以添加多个动画，用逗号分隔


    <style>
        body {
            background-color: pink;
        }
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(./media/bear.png);
            /* 元素可以添加多个动画，用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translate(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

七、CSS3 3D转换（3D 位移：translate3d(x,y,z)、3D 旋转：rotate3d(x,y,z)、透视：perspective、3D呈现 transform-style）

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x 轴：水平向右注意：x右边是正值，左边是负值

y 轴：垂直向下注意：y下面是正值，上面是负值

z 轴：垂直屏幕注意：往外面是正值，往里面是负值

3D转换主要学习工作中最常用的3D位移和 3D旋转

主要知识点

3D 位移：translate3d(x,y,z)

3D 旋转：rotate3d(x,y,z)

透视：perspective

3D呈现 transform-style

3D 位移：translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z 轴方向。

transform: translateX( 100px): 仅仅是在X轴上移动

transform: translateY( 100px): 仅仅是在Y轴上移动

transform: translateZ( 100px): 仅仅是在Z轴上移动（注意：translateZ一般用px单位）

transform: translate3d( x,y,z): 其中x、y、z分别指要移动的轴的方向的距离

注意，xyz是不能省略的，如果没有就写0.

透视：perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。

模拟人类的视觉位置，可认为安排一只眼睛去看

透视我们也称为视距：视距就是人的眼睛到屏幕的距离

距离视觉点越近的在电脑平面成像越大，越远成像越小

透视的单位是像素

透视写在被观察元素的父盒子上面的

3D 旋转 rotate3d

3D 旋转指可以让元素在三维平面内沿着 x轴、y轴、z轴或者自定义轴进行旋转。

语法：

transform: rotateX(45deg): 沿着x 轴正方向旋转45度

transform: rotateY(45deg): 沿着y 轴正方向旋转45度

transform: rotateZ(45deg): 沿着z 轴正方向旋转45度

transform: rotate3d(x,y,x,deg): 沿着自定义轴旋转旋转，deg为角度（了解即可）

对于旋转的方向判断需要先学习一个左手准则。

左手准则：

左手的手拇指指向x 轴正方向

其余手指的弯曲方向就是该元素沿着 x轴旋转的方向（正值）

同理 y、z旋转方向也使用左手准则

3D呈现 transform-style

控制子元素是否开启三维立体环境

transform-style: flat 子元素不开启3d 立体空间 默认的

transform-style: preserve-3d 子元素开启3d 立体空间

代码要写给父级，但影响的是子盒子

这个属性很重要，后面必用


    <style>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 500px;
            /* 让子元素保持3d 立体空间环境 */
            transform-style: preserve-3d;
            transition: all 2s;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);    
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

八、案例（两面翻转的盒子、3D导航栏、旋转木马案例）

两面翻转的盒子


    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            perspective: 500px;
            /* 让背面的紫色盒子保持3d 立体空间环境 */
            transform-style: preserve-3d;
            transition: all 2s;
        }
        .front,
        .back {
            /* 因为两个盒子是叠在一起的，所以要为其加定位 */
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            border-radius: 50%;
        }
        .front {
            /* 让粉色盒子叠在紫色的上面 */
            transform: translateZ(1px);
            background-color: pink;
        }
        .back {
            background-color: purple;
            /* 像手机一样 背靠背旋转让紫色盒子 */
            transform: rotateY(180deg);
        }
        .box:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">黑马程序猿</div>
        <div class="back">pink老师这里等你</div>
    </div>
</body>

3D导航栏案例


    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            margin: 100px;
        }
        li {
            float: left;
            margin: 0 10px;
            list-style: none;
            width: 120px;
            height: 35px; 
            /* 注意透视给box的父盒子li加，因为当鼠标移动到box上时，box也会翻转
            box需要透视，因此要给其父元素li添加 */
            perspective: 200px;
        }
        li .box{
            position: relative;
            width: 100%;
            height: 100%;
            line-height: 35px;
            font-size: 14px;
            text-align: center;   
            transform-style: preserve-3d;
            transition: all 1s;
        }
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .front {
            /* 移动粉色盒子，因为旋转默认按照中心点旋转 */
            transform: translateZ(17.5px);
            background-color: pink;
        }
        .bottom {
            background-color: purple;
            /* 这个 x轴一定是负值，如果有移动或者其他样式，必须先写移动*/
            transform:translate(0,17.5px) rotateX(-90deg);
            color: #fff;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序猿</div>
                <div class="bottom">pink老师这里等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序猿</div>
                <div class="bottom">pink老师这里等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序猿</div>
                <div class="bottom">pink老师这里等你</div>
            </div>
        </li>
    </ul>
</body>

旋转木马案例


    <style>
        @keyframes r {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        body {
            /* 因为要给section 加动画，需要透视效果，所以给section的父盒子加透视 */
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px auto;           
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: r 4s linear infinite;
            background: url(./media/pig.jpg) no-repeat;
        }
        /* 鼠标放上去停止动画 */
        section:hover {
            animation-play-state: paused;
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(./media/dog.jpg) no-repeat;
        }
        section .one {
            transform: translateZ(300px);
        }
        section .two {
            /* 先旋转再移动 */
            transform: rotateY(60deg) translateZ(300px) ;
        }
        section .three {
            transform: rotateY(120deg) translateZ(300px) ;
        }
        section .four {
            transform: rotateY(180deg) translateZ(300px);
        }
        section .five {
            transform: rotateY(240deg) translateZ(300px);
        }
        section .six {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <section>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
    </section>
</body>


<!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>
        @keyframes r {
            0% {}
            100% {
                transform: rotateY(360deg);
            }
        }
        body {
            /* 因为要给section 加动画，需要透视效果，所以给section的父盒子加透视 */
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px auto;
            
            transform-style: preserve-3d;
            animation: r 4s infinite;
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(./media/dog.jpg) no-repeat;
        }
        section .one {
            transform: translateZ(300px);
        }
        section .two {
            transform: translate3d(225px,0,150px) rotateY(60deg);
        }
        section .three {
            transform: translate3d(225px,0,-150px) rotateY(-60deg);
        }
        section .four {
            transform: translateZ(-300px);
        }
        section .five {
            transform: translate3d(-225px,0,-150px) rotateY(60deg);
        }
        section .six {
            transform: translate3d(-225px,0,150px) rotateY(-60deg);
        }
    </style>
</head>
<body>
    <section>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
    </section>
</body>
</html>

八、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码世界探险家/article/detail/60333