发布时间:2019-08-05 15:35:17编辑:auto阅读(2242)
HTML:
<div> <ul> <li id='li1'>1</li> <li id='li2'>2</li> <li id='li3'>3</li> </ul> <a href='#li1'>a</a> <a href='#li2'>b</a> <a href='#li3'>c</a> </div>
CSS:
@keyframes act{ 0%{background:red}; 100%{background:white}; } li:not(:target){ animation:act 1s ease-in; }
进入页面的时候,就会执行li:not(:target),效果在三个li都可用
一旦点击激活target,li:not(:target)就意味着上一个激活的target:
首先点击a,激活target,li:not(:target)无效果
再点b,在第一个li处出现效果
是不是有点坑,呵呵哒。
他的用处就是在手动图片轮播的时候改变z-index的最佳利器!
上一篇: Python list 拼接
下一篇: Linux下C编程(3)
49271
48447
39164
36259
30665
27482
26475
21301
21148
19494
124°
329°
325°
430°
674°
473°
1158°
1135°
1127°
1117°