zoukankan      html  css  js  c++  java
  • css过渡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <style>
            *{
                margin: 0;
                padding: 0;
            }
    
            .box1{
                 800px;
                height: 800px;
                background-color: silver;
                overflow: hidden;
            }
    
            .box1 div{
                 100px;
                height: 100px;
                margin-bottom: 100px;
                margin-left: 0;
            }
    
            .box2{
                background-color: #bfa;
                /* margin-left: auto; */
                /* transition:all 2s; */
                /* 
                    过渡(transition)
                        - 通过过渡可以指定一个属性发生变化时的切换方式
                        - 通过过渡可以创建一些非常好的效果,提升用户的体验
                 */
    
                 /* 
                 transition-property: 指定要执行过渡的属性  
                    多个属性间使用,隔开 
                    如果所有属性都需要过渡,则使用all关键字
                    大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
                 */
                /* transition-property: height , width; */
                /* transition-property: all; */
    
                 /*
                  transition-duration: 指定过渡效果的持续时间
                    时间单位:s 和 ms  1s = 1000ms
                  */
                 /* transition-duration: 100ms, 2s; */
                 /* transition-duration: 2s; */
    
                 /* 
                 transition-timing-function: 过渡的时序函数
                    指定过渡的执行的方式  
                    可选值:
                        ease 默认值,慢速开始,先加速,再减速
                        linear 匀速运动
                        ease-in 加速运动
                        ease-out 减速运动
                        ease-in-out 先加速 后减速
                        cubic-bezier() 来指定时序函数
                            https://cubic-bezier.com
                        steps() 分步执行过渡效果
                            可以设置一个第二个值:
                                end , 在时间结束时执行过渡(默认值)
                                start , 在时间开始时执行过渡
                 */
                 /* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); */
                 /* transition-timing-function: steps(2, start); */
    
    
                 /* 
                 transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡  
                 */
                 /* transition-delay: 2s; */
                 
    
                 /* transition 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟 */
                 transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
            }
    
            .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>
    
  • 相关阅读:
    learnyou 相关网站
    hdu 3038 How Many Answers Are Wrong
    hdu 3047 Zjnu Stadium 并查集高级应用
    poj 1703 Find them, Catch them
    poj 1182 食物链 (带关系的并查集)
    hdu 1233 还是畅通工程
    hdu 1325 Is It A Tree?
    hdu 1856 More is better
    hdu 1272 小希的迷宫
    POJ – 2524 Ubiquitous Religions
  • 原文地址:https://www.cnblogs.com/anyux/p/14715958.html
Copyright © 2011-2022 走看看