Maison > interface Web > tutoriel HTML > CSS3的:not(:target)效果_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-21 09:08:58
original
1429 Les gens l'ont consulté

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>
Copier après la connexion


CSS:

@keyframes act{	0%{background:red};	100%{background:white};}li:not(:target){	animation:act 1s ease-in;}
Copier après la connexion



进入页面的时候,就会执行li:not(:target),效果在三个li都可用


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

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

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

是不是有点坑,呵呵哒。

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal