关于:target和:not(target)的顺序问题

最新推荐文章于 2023-10-24 11:10:37 发布

qq_35577652

最新推荐文章于 2023-10-24 11:10:37 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_35577652/article/details/68065410

版权

顺序如下：

1.刚进入界面，所有的div都是not（target），都执行一遍动画（动画只执行一遍）

2.点击li_1,div_11成为target，执行动画；

3.点击li_3,div_33成为target，执行动画，同时，div_11不是target，执行一遍not（target）的动画，

。。。。。

主要用于解决多重图片切换，利用z-index使被覆盖的图片为上一次出现的图片，相当于加了一层过渡，

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index</title>
</head>
<style type="text/css">
			div{
				background: gray;
				width: 400px;
			}
         	@keyframes changecolor {
				0%{background :white;}   
				100%{background :gray;}   
      		}
      		@-webkit-keyframes changecolor {
				0%{background :white;}   
				100%{background :gray;}   
      		}
      		@keyframes changewidth {
				0%{width:400px;}   
				100%{width:400px;}   
      		}
      		@-webkit-keyframes changewidth {
				0%{width:400px;}   
				100%{width:400px;}   
      		}
            div:not(target){
				animation: changecolor 1s;
				-webkit-animation: changecolor 1s;
            }
            div#bg1:target{
				background :red;transition: 1s;
				animation: changewidth 1s;
				-webkit-animation: changewidth 1s;
            }
            div#bg2:target{
				background :yellow;transition: 1s;
				animation: changewidth 1s;
				-webkit-animation: changewidth 1s;
            }
            div#bg3:target{
				background :green;transition: 1s;
				animation: changewidth 1s;
				-webkit-animation: changewidth 1s;
            }
            div#bg4:target{
				background :blue;transition: 1s;
				animation: changewidth 1s;
				-webkit-animation: changewidth 1s;
            }
            div#bg5:target{
				background :purple;transition: 1s;
				animation: changewidth 1s;
				-webkit-animation: changewidth 1s;

            }

</style>
<body>
        <div class="slider">
        <ul class="clearfix">
        	<li><a href="#bg1">Hipster Fashion Haircut </a></li>
    		<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
    		<li><a href="#bg3">My haire is sooo fantastic!</a></li>
    		<li><a href="#bg4">Eat healthy & excersice!</a></li>
    		<li><a href="#bg5">Lips so kissable I could die ...</a></li>
    	</ul>
    	</div>
		<div class="bg" id="bg1">11</div>
		<div class="bg" id="bg2">22</div>
		<div class="bg" id="bg3">33</div>
		<div class="bg" id="bg4">44</div>
		<div class="bg" id="bg5">55</div>
</body>
</html>