CSS3的:not(:target)效果

发布时间:2019-08-05 15:35:17编辑:auto阅读(1922)

    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都可用

    wKioL1XAR5KSMdoiAAAy4VVdZsM077.jpg


    一旦点击激活target,li:not(:target)就意味着上一个激活的target:

    首先点击a,激活target,li:not(:target)无效果

    wKiom1XARZvzsYGAAADOeSB7sD8965.jpg

    再点b,在第一个li处出现效果

    wKioL1XAR5GwvIjnAADbjWimZ6k209.jpg

    是不是有点坑,呵呵哒。

    他的用处就是在手动图片轮播的时候改变z-index的最佳利器!

关键字

上一篇: Python list 拼接

下一篇: Linux下C编程(3)