第五节 css3动画之图片说明滑入效果
2021-04-06 17:26
标签：body char 说明 bsp set ase html round size 第五节 css3动画之图片说明滑入效果 标签：body char 说明 bsp set ase html round size 原文地址：https://www.cnblogs.com/kogmaw/p/12492440.html 1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>Documenttitle>
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>
上一篇：jQuery 进阶用法
下一篇：第十三节 css3动画之翻页动画
文章标题：第五节 css3动画之图片说明滑入效果
文章链接：http://soscw.com/index.php/essay/72106.html