php中style啥意思,css,_CSS z中 [style] 的写法是什么意思，css - phpStudy

CSS z中 [style] 的写法是什么意思

在张鑫旭大神的博客中http://www.zhangxinxu.com/study/201606/clip-path-piece-fly-into.html

看到了如下CSS代码

.clip[style] {

opacity: 0;

}

.active .clip:not([style]) {

opacity: 0;

animation: fadeIn .1s .4s both;

}

.active .clip[style] {

will-change: transform;

animation: noTransform .5s both;

}

我在网上查了查，没有查到这是什么用法，用[style]有什么作用呢？

张鑫旭的源代码如下：

CSS部分

.clip[style] {

opacity: 0;

}

.active .clip:not([style]) {

opacity: 0;

animation: fadeIn .1s .4s both;

}

.active .clip[style] {

will-change: transform;

animation: noTransform .5s both;

}

@keyframes noTransform {

to {

opacity: 1;

transform: translate3d(0, 0, 0) rotate(0);

}

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.box { height: 190px; }

.text { position: absolute; width: 300px; }

.image { position: absolute; }

HTML部分

1. 普通带文本的元素

魔兽要上映了...

2. 替换元素如图片

JS部分

var eleText = document.getElementById('text'),

eleImage = document.getElementById('image');

// 碎片特效初始化

clipPath(eleText);

clipPath(eleImage);

问题是，CSS中用[style]有什么作用呢？

相关阅读:

extjs combo 强制刷新store

Jquery如何判断当前页面是否在首页？

webstorm的structure面板中这些标志都是什么意思？

如何让百度收录网站内容和icon？

请教APP集成支付宝，服务端该怎么设计呢?

Flask Web开发 9.3节 角色验证 return self.role is not None and \

如何吧 javascript的 异步API 变成为同步的？

chat列表，每两个人只对应一条记录，mysql如何查询？

ubuntu系统中nginx配置问题

为什么auto fract = 8.25f/2.5声明了一个double?

windows10重置以后，启动进不了系统？

scrapy新建项目报错

nodejs不能读取oracle数据库完整数据？

mysql读取语句错误

关于android的activity中camera预览问题，涉及activity生命周期

div中如何实现背景图沾满整个浏览器视窗？

\"(.*?)\" 请问这个正则表达式是什么意思

flask中，如何在首页实现文章图片简略表示

js 匿名函数作用域

Object.defineProperty