手风琴效果的制作小贴士和代码实例
最编程
2024-08-09 16:56:58
...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
ul{list-style:none;}
ul{width:800px; height:450px;margin:50px auto;}
li{float:left;width:160px;height:450px; padding:20px; overflow:hidden;}
li h3{text-align:center;}
li p{line-height:2;}
.one{background:#f60}
.two{background:#0f0}
.three{background:#ff0}
.four{background:#00f}
ul:hover li{width:0px;}
ul:hover li h3,ul:hover li p{display:none;}
ul li:hover{width:640px;}
ul li:hover h3,ul li:hover p{display:block;}
</style>
</head>
<body>
<ul>
<li class="one">
<h3>春</h3>
<p>春天，就像一个才高八斗的小姑娘，她用古琴弹奏出一首首曲子。化为阵阵春雨让万物复苏。她用手指一点。花儿睁开了朦胧的睡眼，小草探出了它那嫩绿的小头睁着眼好奇的看着这个奇幻的世界。大树张开长长的手臂好像要拍掌似的。春天真奇幻</p>
</li>
<li class="two">
<h3>夏</h3>
<p>夏天，知了在树上叫着好像在说好热，好热。大黄狗在地上趴着吐出长长的舌头，火热的太阳毫不留情地烤着大地上的一切。大地被烤得发烫，地面上仿佛被一个巨大的蒸笼罩住了，使人透不过气来。但，这就是夏天的魅力，它让我有一种在温暖中的感觉。尤其是夏天的荷花，那就是让人窒息的可爱和美丽。它们一朵朵好像一个个天使雪白的外衣衬托着一个即可爱又娇小的花骨朵儿夏天魅力说也说不完。</p>
</li>
<li class="three">
<h3>秋</h3>
<p>秋天，干枯了的叶子被风婆婆一吹就像一只翩翩起舞的金色蝴蝶坠地，地上就像一片金色的海洋当你看到这像一幅画的景色是那你必定会卷入这幅画中。秋天不但美还是个丰收的季节。你瞧，那果园里的柿子如一个个小红灯笼挂在树枝上，夜晚看过去它好像在发光。还有那像饱满又水分多的大石榴保准你见到就口水直流三千尺，这就是秋天。</p>
</li>
<li class="four">
<h3>冬</h3>
<p>冬天，一个寒冷的季节，可它的美令人陶醉自然忘了寒冷。雪花轻轻飘落不一会地上就像覆盖了一片白色的纯然毛毯而且地上的雪可以用来打雪战，堆雪人，玩不尽的游戏更是说不尽。在这些游戏中笑声抵挡了寒冷。</p>
</li>
</ul>
</body>
</html>