首页 > web前端 > html教程 > CSS3的:not(:target)效果_html/css_WEB-ITnose

CSS3的:not(:target)效果_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 09:08:58
原创
1423 人浏览过

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的最佳利器!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板