<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> .p-wrap-2 { position: relative; top: 30px; width: 500px; height: 300px; background: yellowgreen; overflow: hidden; -webkit-animation: .5s ease wrap_kf forwards; } @-webkit-keyframes wrap_kf { 0% { height: 0; } 100% { height: 300px; } } /* 只要wrap2出现,就会执行这一段,会看到动画效果和最后完整的wrap2。 */ .p-wrap-2:target { overflow: hidden; -webkit-animation: .5s ease wrap_kf_2 forwards; } @-webkit-keyframes wrap_kf_2 { 0% { height: 300px; } 100% { height: 0; } } /* 通过对点击nav-2,来触发 news2的target 样式。 效果为将p-wrap-2的样式隐藏,执行动画。 */ .nav { position: absolute; top: 0%; } .p-wrap-1:target ~ .nav-1 { display: none; } .p-wrap-2:target ~ .nav-2 { display: none; } /* nav 通过绝对定位 定位在最上方。 然后通过 锚事件 的点击执行隐藏 nav的效果。 点击某一个之后,如果有别的隐藏的,那么隐藏的就会显示出来。 因为随便点击下边的一个a标签,如果有隐藏的,就会显示出来。所以推断有这样一个自动的效果。 */ </style> </head> <body> <div class="target_wrap"> <div class="p-wrap p-wrap-1" id="news1"></div> <div class="p-wrap p-wrap-2" id="news2"> <ul id="doc_navbar" class="doc-horizonal"> <li class="actived"><a href="###">开始使用</a></li> <li><a href="###">组件列表</a></li> <li><a href="###">下载和定制</a></li> <li><a href="###">关于和支持</a></li> <li><a href="###">开发者工具</a></li> <li class="doc-right"><a href="###">历史版本</a></li> </ul> </div> <p class="nav nav-1" ><a href="#news1">111111111</a></p> <p class="nav nav-2"><a href="#news2">222222222</a></p> </div> </body> </html>
实际原理也就是一个动画的播放,伸缩或者展开某一区域。然后加上配以 按钮(上面是1111111 和222222)的消失,出现。
用到了CSS3 动画效果+target都是CSS3的效果。
A~B选择器。
element1~element2 选择器 element1 之后出现的所有 element2。之前出现的即使是相同父元素也不会选择。
两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。
大概过程为如下
按钮显示为11111111,则显示p-wrap-1,pwrap1没有样式,显示为空白。
点击111111111之后,111111会消失。
根据一个内部的机制,会显示22222222。p-wrap-2激活。
(因为发现随便点击一个a之后,其他的a都会显示出来,所以才可以只写一个 按钮的消失,不用写另一个按钮的出现,他内部机制就会自动调用其他按钮的出现)
按钮显示为22222222,p-wrap-2是一个带着展开动画效果的div。我们就可以看到一个弹出的div效果。
当我们点击2222222时,会激活id为news2的一个target。执行p-wrap-2:target。这个样式是做的div的收缩动画效果。
下边为作者解释
2个按钮样式一样,点击的时候会依次切换,然后下面有2个标识了target的容器,根据这2个容器又可以找兄弟节点,设置按钮显示和隐藏。