zoukankan      html  css  js  c++  java
  • 第五节 css3动画之图片说明滑入效果

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style type="text/css">
     7         .box{
     8             width: 200px;
     9             height: 300px;
    10             margin: 50px auto 0;
    11             position: relative;
    12     
    13             overflow: hidden;
    14         }
    15 
    16         .box2{
    17             width: 200px;
    18             height:120px;
    19             background-color:rgba(0,0,0,0.3);
    20             position: absolute;
    21             top: 300px;
    22             transition:all 1s ease 1s ;
    23         }
    24 
    25         .box2 h3{
    26             font-size: 14px;
    27             line-height: 100px;
    28             text-align: center;
    29             margin: 0;
    30             color: #fff;
    31         }
    32 
    33         .box:hover .box2{
    34             top: 180px;
    35         }
    36     </style>
    37 </head>
    38 <body>
    39     <div class="box">
    40         <img src="banner01.jpg" alt="图片">
    41         <div class="box2">
    42             <h3>文字说明的标题</h3>
    43         </div>
    44     </div>
    45 </body>
    46 </html>
  • 相关阅读:

    删与改

    基本操作
    名词解释
    Python内置函数(11)——complex
    Python内置函数(10)——float
    Python内置函数(9)——int
    Python内置函数(8)——bool
    Python内置函数(7)——sum
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12492440.html
Copyright © 2011-2022 走看看