小案例-1

手风琴

1.首先 第一步先把html打好,body部分无非是显示页面的关键部分,排列的格式我用的是<ul><li>标签,也可以用div来撰写.

小案例-1

 

2.手风琴我做了四个样式,索性就把它们全部打上了.

小案例-1

 

3.手风琴的css部分,通俗易懂,要注意的部分是一定要加定位position不然就会错乱了.难的呢就是难理解hover伪类的部分,

小案例-1

 

Finally:效果图

小案例-1

 

旋转轴心

  1. 老样子,先把html部分敲完,我这边加了个背景颜色,看个人喜好吧,在body标签上打上bgcolor=”颜色”即可,如图.

小案例-1

 

2.这是打上之后的样子.

小案例-1

 

3.再把它的css样式打上,让他们重叠起来看起来只有一张,这时候就需要用到定位position了,

小案例-1

 

4.这就是重叠了之后的样子.

小案例-1

 

5.最后把伪类hover打上即可需要注意的是一定要是transform才有效果,度数呢看你要做成什么样子,根据自身喜好来调试.

小案例-1

 

Finally:结尾奉上效果图 帅吧,这不ysjx,你行你也来,自信即巅峰

小案例-1

 

上一篇:异常基础


下一篇:Day 15