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