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

时间:2023-03-09 04:20:43
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;
  • CSS3_过渡_2D 变换_瓶体旋转_动态时钟
  • <!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>