zoukankan      html  css  js  c++  java
  • css---过渡天坑

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #test{
                     100px;
                    height: 100px;
                
                    border:3px solid red;
                    background: pink;
                    text-align: center;
                    font: 50px/200px "微软雅黑" ;
                    
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                    transition-property: width;
                    transition-duration: 9s;
                     transition-timing-function: inherit;
                    
                }
                html{
                    height: 100%;
                }
                html body{
                      height: 60%;
                      border: 3px solid yellow;
                      margin-top: 100px;
                     
                }
                body:hover #test{
                    transition-property: height;    
                     200px;
                    height: 200px;
                
                }
                
            </style>
        </head>
        <body>
            <div id="test">
            
            </div>
        </body>
    </html>

    异步加载                                       确实没看懂这什么坑

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #test{
                     10px;
                    height: 10px;
                
                    border:3px solid red;
                    background: pink;
                    text-align: center;
                    font: 50px/200px "微软雅黑" ;
                    
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                    transition-property: width;
                    transition-duration: 9s;
                     transition-timing-function: inherit;
                    
                }
                html{
                    height: 100%;
                }
                html body{
                      height: 60%;
                      border: 3px solid yellow;
                      margin-top: 100px;
                     
                }
             
                
            </style>
            <script type="text/javascript">
            
                //transition 在元素首次渲染还没有结束的情况下是不会触发的
                var tst=document.querySelector("#test");
                tst.style.width="300px";
            </script>
            
        </head>
        <body>
            <div id="test">
            
            </div>
        </body>
    </html>
    在元素首次渲染还没有结束的情况下是不会触发的
  • 相关阅读:
    团购倒计时
    折半查找
    比较函数
    行为驱动开发: Cucumber的目录结构和执行过程 (转载)
    ruby 方法查找 and执行方法
    Rubyinstance_variable_get(@xx)
    Ruby 模块
    散列
    ruby webdriver 启动firefox driver时,加载firebug的扩展
    git使用简介
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11776750.html
Copyright © 2011-2022 走看看