zoukankan      html  css  js  c++  java
  • css-transition-过渡相关笔记

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        .box1{
          width: 800px;
          height: 800px;
          background-color: silver;
          overflow: hidden;
        }
        .box1 div{
          width: 100px;
          height: 100px;
          margin-bottom: 100px;
          margin-left: 0;
        }
        .box2{
          background-color: #bfa;
          /* transition: all 2s; */
          /* 
          过渡: transition
            可以指定一个属性发生变化时候切换方式
            可以创建一些非常好的效果,提升用户体验
           */
          /* 
            transition-property 指定要过渡的属性 
            多个属性间用,隔开
            如果所有属性都要过渡,使用all
            大部分属性都支持过渡效果(只要是能计算的值都可以)注意:必须是一个有效数值向另一个有效数值过渡 
          */
          /* transition-property: height,width; */
          /* transition-property: all; */
    
          /* 
            transition-duration 指定过渡持续时间 
            时间单位: s和ms 1s = 1000ms
          */
         /* transition-duration: 100ms, 1s; */
         /* transition-duration: 2s; */
          /* 
            transition-timing-function 过渡的时序函数
            指定过渡的执行方式
            可选值
              -ease 默认值,慢速开始,先加速,再减速
              -linear 匀速运动
              -ease-in 加速运动
              -ease-out 减速运动
              -ease-in-out 先加速,后减速
              -cubic-bezier()贝塞尔曲线来指定时序函数
              steps() 分步执行过渡效果
                -end 在时间结束执行过渡
                -start 在时间开始时执行过渡
          */
         /* transition-timing-function: cubic-bezier(); */
         /* transition-timing-function: steps(1,end); */
          /* 
            transition-delay 过渡效果的延迟
          */
          /* transition-delay: 2s; */
    
          /* transition 可以同时设置相关的所有属性,要求如果有延迟则两个时间中第一个是持续时间,第二个是延迟 */
          transition:margin-left 2s 1s;
        }
        .box3{
          background-color: orange;
          transition-property: all;
          transition-duration: 2s;
        }
    
        .box1:hover div{
          /*  200px;
          height: 200px;
          background-color: orange; */
          margin-left: 700px;
        }
    
    
      </style>
    </head>
    <body>
      <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
      </div>
    </body>
    </html>
  • 相关阅读:
    HTML5 video标签支持情况分析
    1px直线与1px四边边框的写法
    FJOI2017 day2游记
    FJOI2017前做题记录
    关于Fibonacci博弈的一些学习
    【BZOJ4195】 [Noi2015]程序自动分析
    【BZOJ2115】 [Wc2011] Xor
    【BZOJ3811/UOJ36】 玛里苟斯
    【BZOJ4565】 [Haoi2016]字符合并
    【BZOJ2749】[HAOI2012]外星人
  • 原文地址:https://www.cnblogs.com/jia460/p/13788308.html
Copyright © 2011-2022 走看看