CSS3的:not(:target)效果_html/css_WEB-ITnose
程序员文章站
2024-01-30 08:37:28
...
HTML:
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的最佳利器!
推荐阅读
-
CSS3的:not(:target)效果_html/css_WEB-ITnose
-
一道关于CSS选择器优先级的题_html/css_WEB-ITnose
-
25个精致的IPHONE 6和APPLE WATCH原型下载!_html/css_WEB-ITnose
-
Captain Icon ? 350+ 有趣的矢量图标免费下载_html/css_WEB-ITnose
-
台灣美感養成訓練》蔡英文選舉官網這麼美怎做的?背後團隊公佈設計規範_html/css_WEB-ITnose
-
css里面的几个你不知道的属性_html/css_WEB-ITnose
-
jQuery实现的全选、反选和不选功能_html/css_WEB-ITnose
-
如何使用CSS实现细线表格效果_html/css_WEB-ITnose
-
CSS3 弹性布局弹性流(flex-flow)属性详解和实例_html/css_WEB-ITnose
-
很有必要了解的HTML嵌套规则_html/css_WEB-ITnose