使用CSS3伪类选择器实现简单手风琴效果,与其功能的介绍

1.展示

使用CSS3伪类选择器实现简单手风琴效果,与其功能的介绍_第1张图片使用CSS3伪类选择器实现简单手风琴效果,与其功能的介绍_第2张图片使用CSS3伪类选择器实现简单手风琴效果,与其功能的介绍_第3张图片

2.原理

主要使用了C3选择器中的两个:

①:not():不包含,如div:not(.test),就是在div中选中不包含有test类的,例如可以配合E:not(:last-of-type)来排除掉最后一个元素并选中剩余的;

②:target:目标的id变为location.hash的值时,也就是锚点选中它时 来选中它 的一种选择器,例如锚点可以通过标签的href里加#来改变。

3.测试时遇到两点需要注意的问题

①给元素设置ID时不能用单个的字母,不然锚点锚不上;

②想给效果加上过渡持续时间时发现,目前显示等属性不受支持。因为是基于数值和时间的计算(长度,百分比,角度,颜色能转换为数值)。

4.源码





    
    
    
    C3手风琴效果
    



    
手风琴 AAA
  • 帅帅帅
  • 帅帅帅帅帅
BBB
  • 酷酷酷
  • 酷酷酷酷酷
CCC
  • 美美美
  • 美美美美美
DDD
  • 身体好
  • 身体好
  • 身体好

 

你可能感兴趣的:(CSS3,手风琴,HTML)