zoukankan      html  css  js  c++  java
  • css3 transition 动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                background-color: gainsboro;
            }
    
            .out {
                margin:10px;
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                padding-top: 20px;
                display: block;
                float: left;
    
            }
    
            .out h2, .out p {
                opacity: 0;
                transition: all 0.2s linear;
    
            }
    
            .out h2.hh {
                width: 100%;
                height: 20px;
                background-color: antiquewhite;
                transform: translateY(-100px);
                font-size: 16px;
                padding-top: 2px;
                padding-bottom: 2px;
            }
    
            .out p.pp {
                width: 100%;
                height: 120px;
                overflow: hidden;
                background-color: aquamarine;
                transform: translateY(100px);
                margin-top: 50px;
            }
    
            .out:hover h2, .out:hover p {
                opacity: 1;
                transform: translateY(0px);
            }
        </style>
    </head>
    <body>
    
    
    <div class="out">
        <h2 class="hh">head ...</h2>
    
        <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
    
    </div>
    <div class="out">
        <h2 class="hh">head ...</h2>
    
        <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
    
    </div>
    <div class="out">
        <h2 class="hh">head ...</h2>
    
        <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
    
    </div>
    <div class="out">
        <h2 class="hh">head ...</h2>
    
        <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info
            ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p>
    
    </div>
    
    
    </body>
    </html>
    没有加兼容各种现代浏览器的 前缀,再谷歌浏览器可以正确查看

  • 相关阅读:
    网页中 弹出提示框
    三级联动
    pdo预处理
    ajax返回数据类型 text json xml
    PHP语言 -- 数据访问 好友列表
    2.17 牛牛你个渣渣这种题都做不出来 尹老师教你的你全还给他了吗?
    1.25 作业
    1.22作业
    1.20 作业
    js 学习笔记
  • 原文地址:https://www.cnblogs.com/wind90/p/4900741.html
Copyright © 2011-2022 走看看