制作手风琴效果的注意事项（附代码）

hover的时候先统一所有再定义当前，注意先后顺序，例如：

<!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>

转载于:https://www.cnblogs.com/wangbingblog/p/11360242.html

制作手风琴效果的注意事项（附代码）相关推荐

使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
吴恩达斯坦福CS230第一名：图像超级补全，效果惊艳（附代码）
[新智元导读]图像修复(Image inpainting)是一个已经被广泛研究的计算机视觉问题,即恢复图像中缺失的部分.斯坦福大学CS230课程的Mark Sabini等人提出"Image ...
使用tensorflow训练模型时制作自己的mnist集（附代码）
(该方法存在问题,待改正)使用tensorflow训练模型时制作自己的mnist集(附代码) 探索过程代码(python) 想法探索过程 (ps:第一次写,写的不好多多见谅!) mnist集合是一 ...
html放大镜原理,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
【Python】全文3000字，Pyecharts制作可视化大屏全流程! (附代码分享)
就在上一篇的文章当中干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应了他的请 ...
C语言制作电子时钟程序（内附代码）
今天来用C语言制作一款电子时钟程序,相信你们一定能用的上. 效果展示 1.窗口创建 2.基本绘图 3.时间获取 4.代码展示绘制表盘部分代码: #include <stdio.h> ...
Python 玩出花了！一文教你用 Python 制作吃豆人游戏！ | 附代码
作者 | 李秋键责编 | Carol 封图 | CSDN 下载自视觉中国近几年来Python语言得到了快速发展,而Pygame作为Python开发应用和游戏必备的库更是展现了Python的优越性. ...

制作手风琴效果的注意事项（附代码）

制作手风琴效果的注意事项（附代码）相关推荐

最新文章

热门文章