CSS3_过渡_2D 变换_瓶体旋转_动态时钟

1. 过渡 transition

允许 CSS 的属性值在一定时间内平滑的过渡，

在鼠标点击，鼠标滑过或对属性改变中触发，并圆滑的改变 CSS 的属性值

简写属性：

#box {

    width: 300px;

    height: 200px;

    background-color: red;

  transition: property timing-function duration delay;

}
/*

        没有顺序限制

        但是必须先写 过渡，再写 延迟

        即 先写 duration ， 再写 delay

        transition: 1s; 等同于 trasition: 1s all ease 0;

    */

#box:hover {

    width: 200px;

    height: 300px;

    background-color: blue;

}

transition-property
- 定义：设置对象的参与过渡的属性，或者说要监测的属性
  - ```
  transition-property: width;
```
- 可选值：
  - all 默认值，所有属性都改变
  - none 没有属性改变
  - property 元素的属性名

transition-duration
- 定义：设置过渡效果需要花费的事件，以秒/毫秒计算
  - ```
  transition-duration: 1s;
  transition-duration: 1000ms;
```
- 默认值： 0

transition-timing-function
- 定义：设置过渡的动画类型（只能使用一种类型）
  - ease 默认值，平滑过渡（慢-快-慢）cubic-bezier(0.25, 0.1, 0.25, 1)
  - linear 线性过渡（匀速） cubic-bezier(0, 0, 1, 1)
    - transition-timing-function: 贝塞尔曲线;
    - transition-timing-function: cubic-bezier(.17,.67,.82,.35);
  - ease-in 慢-快 cubic-bezier(0.42, 0, 1, 1)
  - ease-out 快-慢 cubic-bezier(0, 0, 0.58, 1)
  - ease-in-out 慢-快-慢 cubic-bezier(0.42, 0, 0.58, 1) 相较于ease 的幅度更大

transition-delay
- 定义：设置延迟的过渡时间，指定等待 1s/1000ms 再开始过渡动画。
- 默认值： 0

过渡样式的位置
- 放在原来样式中
  - 鼠标悬浮于鼠标离开，都有过渡效果
- 放在新的样式中
  - 只有鼠标悬浮时有效果，鼠标离开时无效果

多属性过渡，需求： 3s 延迟后 width 变成 300px，再延迟 1s 后 background-color 变成 red

使用逗号隔开两个过渡参数

#box {

    width: 300px;

    height: 200px;

    background-color: red;

    transition: 2s 3s width linear, background 2s linear;

}
 /* （面试题）

            transition: width 3s linear 2s, 2s;

                // 不会有延迟 2s，立刻执行 3s 匀速过渡动画

            （1）过渡的覆盖问题，相当于：

                transition: all 2s ease 0s;

    */

js 实现页面加载时过渡
- （2）DOM 页面没有渲染完，过渡是不生效的，即 js 代码执行了，才开始监控属性
  - 元素渲染完，过渡才生效
  - 解决方案：
    - 1. 使用 window.setTimeout() 来保证元素渲染完。
    - 2. window.onload(); 保证外部所有资源加载完。

（3）并不是所有的属性都能加过渡
- 就看元素的变化，有没有中间的过程
- 元素有无到有的过渡，使用 opacity: 0→1; ，而不能使用 display: none→block;

幽灵边框

/************** 幽灵边框 ***************/

.ghost_border {

    position: relative;

    top: 0px;

    left: 0px;

}

.ghost_border::before,

.ghost_border::after {

    content:"";

    position: absolute;

    display: block;

    width:;

    height: 20%;

    background-color: olive;

    transition: 1s all ease 0s;

}

.ghost_border::before {

    top:;

    left:;

}

.ghost_border::after {

    bottom:;

    right:;

}

body .ghost_border:hover::before,

body .ghost_border:hover::after {

    width: 100%;

}

2. 2D 变换

（面试题）display: inline 元素不支持 transform：即不支持 2D 变换，也不支持 3D变换

尽管元素外形发生变化，其在文档流的位置不变。即不影响周围元素布局

旋转 rotate(0deg)
- 定义：通过制定一个角度，对元素指定一个 2D 的旋转
- 使用：
  - transform: rotate(0deg);
  - deg 增大，元素顺时针旋转
  - deg 减小，元素逆时针旋转
  - 0deg 和 360deg 的效果是一样的

平移 translate(0px, 0px)
- 定义：
- 使用：
  - transform: translateX(0px);
    - 水平方向平移
    - 数值增大，向右移
    - 数值减小，向左移
  - transform: translateY(0px);
    - 垂直方向平移
    - 数值增大，向下
    - 数值增大，向上
  - transform: translate(0px, 0px);
    - 同时控制水平，垂直平移
    - transform: translate(0px); 等同于 transform: translateX(0px);
    - 即只写一个参数，第二个参数默认为 0px。即只控制水平平移

缩放 scale(1)
- 定义：
- 使用
  - transform: scale(1);
    - 默认值 1
    - 可以为负值，-1 时为翻转，再小就是翻转放大
  - transform: scaleX(1);
    - 设置水平方向的缩放
  - transform: scaleY(1);
  - transform: scale(1, 1);
    - 如果只写一个参数，元素的水平，垂直方向同时进行缩放

扭曲 skew(0deg)
- 定义：改变用户视觉角度，
- 使用：
  - transform: skewX(0deg);
    - 水平方向扭曲
    - 扭曲度增加，视觉上向左
    - 扭曲度减小，视觉上向右
  - transform: skewY(0deg);
    - 垂直方向扭曲
    - 扭曲度增加，视觉上向下
    - 扭曲度减小，视觉上向上
  - transform: skew(0deg, 0deg);
    - skew(0deg);
    - 只写一个数值，是等同于 transform: skewX(0deg); 控制水平方向扭曲的
- 当扭曲度 skew(90deg) 时，元素将垂直于屏幕，元素将在视觉上看不见
- 当扭曲度 skew(180deg) 时，与 skew(0deg) 效果一致

变换基点 transform-origin: center; （为元素的左上角）
- 定义：元素变换的基准点。
- 使用：
  - transform-origin: 水平方向垂直方向;
- 默认基准点：
  - rotate 几何元素中心点
  - scale 几何元素中心点
  - skew 几何元素中心点
  - translate 元素自身位置

#box {

    width: 200px;

    height: 200px;

    transform: rotate(0deg);

    /* 设置基准点为元素左上角 */

    transform-origin: 0px 0px;

    /* 默认值 */

    transform-origin: center;

    transform-origin: 100% center;

    transform-origin: 100%;

    transform-origin: 100% 100%;

    transform-origin: 100px center;

    transform-origin: 100px;

    transform-origin: 100px 100px;

    /* 关键字 */

    transform-origin: top left;

    transform-origin: top;

    transform-origin: right;

    transform-origin: bottom;

    transform-origin: left;

}

/*百分比参照于自身

    border-radius:

    background-size:

    background-origin:

    transform: translate(-50%， -50%);

*/

当前元素水平，垂直居中

/* 所有场景可用 */

#box {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

/* 前提条件： width 和 height 必须已知 */

#box {

    width: 200px;

    height: 200px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -100px 0 0 -100px;

}

#box {

    width: 200px;

    height: 200px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -50% 0 0 -50%;

}

综合变换（经常两两组合）

#box {

    width: 200px;

    height: 200px;

    background-color: olive;

    // 效果1    移动 200px 再缩小 0.5

    transform: translate(200px) scale(0.5);

    // 效果2    缩小 0.5，移动 100px
transform: scale(0.5) translate(200px);

    /* x相当于 transform: translate(100px) scale(0.5); */

}

/*

    scale  发生缩放时，
                     会将后面的 translate 的数值也会进行缩放
                     对于后面的 rotate，skew 无影响

    rotate 发生旋转时，
                     会将后面的 translate 的 xy 坐标轴也旋转
                     会将后面的 skew 的扭曲轴进行旋转

    skew   发生扭曲时，
                     会将后面的 translate 的 xy 坐标轴也扭曲

*/

3. 瓶体旋转：

先写瓶纸，再写瓶体，保证瓶体在上
- 包裹（瓶纸-瓶体）
- 使用定位，使之重合
- 使用 js 设置包裹的宽高
- img 转成块儿，处理底部留白
- overflow 隐藏瓶纸
- 使用 js 定时器更新 transform: translateX(colaX+"px");
- 在纸后加一张纸，解决极值问题

CSS3_过渡_2D 变换_瓶体旋转_动态时钟

        ... ...

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #fff;

                font: 14px Helvetica, Arial, sans-serif;

            }

            /**** Cola Can Scroll ****/

            #can_box img {

                display: block;    /* 解决图片留白 */

            }

            #can_bg img {

                float: left;    /* 两张图片在一行 */

            }

            #can_box {

                position: relative;

                margin: 150px auto;

                overflow: hidden;

            }

            #can_bg {

                position: absolute;

                top: 10px;

                left: 0px;

            }

            #can_body {

                position: absolute;

                top: 0px;

                left: 0px;

            }

        </style>

    </head>

    <body>

        <div id="can_box">

            <div id="can_bg">

                <img id="cola_bg" src="./img/cola_bg.jpg"/>

                <img src="./img/cola_bg.jpg"/>

            </div>

            <div id="can_body">

                <img id="cola_can" src="./img/cola_can.png"/>

            </div>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            window.onload = function(){

                var canBox = document.getElementById("can_box");

                var canBg = document.getElementById("can_bg");

                var colaBg = document.getElementById("cola_bg");

                var colaCan = document.getElementById("cola_can");

                canBox.style.width = colaCan.offsetWidth+"px";

                canBox.style.height = colaCan.offsetHeight+"px";

                canBg.style.width = colaBg.offsetWidth* 2+"px";

                canBg.style.height = colaCan.offsetHeight+"px";

                var canLeft = 0;

                window.setInterval(function(){

                    canLeft -= 1;

                    if(canLeft <= -colaBg.offsetWidth){

                        canLeft = 0;

                    }

                    canBg.style.transform = "translate("+canLeft+"px)";

                },20);

            };

        </script>

        ... ...

4. 动态时钟

HTML 元素刻度、时、分、秒、表芯
定位使各元素归位。
用 js 给各个刻度设置变换基点，再设置旋转角度
注意细节：整点刻度的变换基点与普通刻度的变换基点不一样
注意细节：时针，分针移动方式。。。
- 例如 11:30:30，
  - sec = date.getSconds();
  - min = date.getMinutes()+sec/60;
  - hour = date.getHours()+min/60;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Timing Clock</title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            /**** Timing clock ****/

            #clock_dial {

                position: relative;

                width: 300px;

                height: 300px;

                margin: 300px auto 0;

                border-radius: 50%;

                background: olive;

            }

            #clock_second {

                position: absolute;

                top: 30px;

                left: 149px;

                transform-origin: 1px 120px;

                width: 2px;

                height: 120px;

                background-color: red;

            }

            #clock_minute {

                position: absolute;

                top: 70px;

                left: 148px;

                transform-origin: 2px 80px;

                width: 4px;

                height: 80px;

                background-color: green;

            }

            #clock_hour {

                position: absolute;

                top: 100px;

                left: 147px;

                transform-origin: 3px 50px;

                width: 6px;

                height: 50px;

                background-color: blue;

            }

            #clock_core {

                position: absolute;

                top: 145px;

                left: 145px;

                width: 10px;

                height: 10px;

                border-radius: 50%;

                background-color: pink;

            }

            .clock_scale {

                position: absolute;

                top: 0px;

                left: 149px;

                transform-origin: 1px 150px;

                width: 2px;

                height: 5px;

                background-color: #68ea94;

            }

            .clock_scale:nth-child(5n) {

                transform-origin: 2px 150px;

                width: 4px;

                height: 10px;

                background-color: #68ea94;

            }

        </style>

    </head>

    <body>

        <div id="clock_dial">

            <div id="clock_second">

            </div>

            <div id="clock_minute">

            </div>

            <div id="clock_hour">

            </div>

            <div id="clock_core">

            </div>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            /**** 画刻度 ****/

            var clockDial = document.getElementById("clock_dial");

            var i = 0;

            for(i=0; i<=59; i++){

                var firstDiv = document.createElement("div");

                firstDiv.className = "clock_scale";

                clockDial.appendChild(firstDiv);

                firstDiv.style.transform = "rotate("+ 6*i +"deg)";

            }

            /**** 动起来 ****/

            var clockSecond = document.getElementById("clock_second");

            var clockMinute = document.getElementById("clock_minute");

            var clockHour = document.getElementById("clock_hour");

            window.setInterval(function(){

                var nowTime = new Date();

                s = nowTime.getSeconds();

                m = nowTime.getMinutes()+s/60;

                h = nowTime.getHours()+m/60;

                clockSecond.style.transform = "rotate("+s*6+"deg)";

                clockMinute.style.transform = "rotate("+m*6+"deg)";

                clockHour.style.transform = "rotate("+h*30+"deg)";

            },1000);

        </script>

    </body>

</html>