CSS3

css3新增选择器

1.属性选择器

权重为10
input[value=]
input[type="val"]
div[att^="val"]       //以val为开头的
dic[att$="val"]       //以val为结尾的

2.结构伪类选择器

ul li:first-child{}
ul li:last-child{}
ul li:nth-child(n){}    //所有的孩子
ul li:nth-child(2){}   //第2个孩子
ul li:nth-child(even){}   偶数
ul li:nth-child(odd){}     奇数
ul li:nth-child(){}
2n|3n|5n    倍数
n+3  n+5   从第几个（包含这个数）
-n+3   -n+5     前几个
nth-of-type(n)    //指定元素进行排序，然后再进行查找

3.伪元素选择器

权重为1
属于行内元素
content为必须属性
::before{content:'';
}::after{}

2D转换

不会影响其他盒子

1.2D移动

translate对于行内元素是无效的
transform:translate(x,y);
transform:translateX();
transform:translateY();实现一个盒子水平垂直居中
top:50%;
left:50%;
transform:translate(-50%,-50%)

2.2D旋转

 rorate(xdeg)
transform:rotate(45deg)    顺时针旋转45度设置旋转中心点
transform-origin:x y;        //默认是50% 50%  等价于center center
transform-origin:left bottom;      //可以是方位名词
transform-origin:x y;   // 也可以是像素

3.2D缩放

scale(x,y)
transform:scale(x,y)        //里面写的数字，不跟单位  x是宽度的倍数 y是高度的倍数
transform:scale(n)        //一个数字表示等比缩放的也可以设置缩放中心点2D转换可以综合写法 transform:translate() rotate() scale();      //中间用空格同时有位移和其他属性时，位移放在最前面

动画制作

###  1. 定义动画

@keyframes move{0%{transform:translate();}100%{transform:translate();}
}

2. 调用动画

动画名称
animation-name:move;
持续时间      //完成一个周期所需要的时间
animation-duration:2s;

3.动画属性

运动曲线
animation-timing-function:linear 匀速||ease 默认||steps() 步长;何时开始
animation-delay:1s;重复次数
animation-iteration-count:n||infinite;     //无限重复是否反方向播放
animation-direction:normal||alternate;       //默认||反方向动画结束后的状态   默认的是backwords      停留在结束状态forwords
animation-fill-mode:backwords||forwords;停止动画
animation-play-state:paused||running;简写属性    //前两个属性一定要写
animation:myname 持续时间 运动曲线 何时开始 播放次数 是否反方向;可以调用多个动画
animation:第一个动画,第二个动画;

3D转换

透视 perspective

透视写在被观察元素的父盒子上面
div{perspectiVe:500px;
}

1.3D移动 translate3d

transform:translate3d(x,y,z);     //x,y,z是不能省略的，如果没有就写零

2.3D旋转 rotate3D

transform:rotateX() rotateY() rotateZ()      //rotateZ() 类似与2D旋转
transform:rotate3d(x,y,z,deg);
transform:rotate3d(1,1,0,deg);

3.3D呈现 transform-style

代码写在被观察元素的父盒子上面
div{transform-style:flat 默认的，不开启3d立体空间||preserve-3d 开启;
}

4.案例制作

两面盒子翻转案例
3D导航栏案例
旋转木马案例

作者：hero_th
作品制作不易，请多多支持哟！~~~

CSS3 详细新增内容相关推荐

详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
安卓手机怎么查看iccid_安卓便签敬业签怎么查看日历月视图中一天所有的新增内容?...
有的用户在使用手机安卓便签敬业签的时候,会创建多个不同的分类来记事,但是当他想要查看某一天新增的所有便签内容时,应该怎么查看呢?相信有不少用户都知道时间轴中会记录所有新增.修改.删除的个人便签内容,所 ...
腐烂国度2主宰版计算机学知识,腐烂国度2主宰版新增内容及mod说明
<腐烂国度2:主宰版>图文全攻略,全任务全基地详解资料攻略(含"新增内容""资料合集""全任务/基地""上手指南&qu ...
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 Wa ...
的ui在vs中显示没有成员_在电脑桌面使用敬业签团队便签怎么设置新增内容在上面显示？...
实时跟进小组成员的各项任务的完成情况,及时将工作任务安排下去,是提高团队工作效率的较为有效的方法.在监督小组成员任务状况以及及时安排工作方面,选择一款支持多人同步在线协作的软件是非常有必要的. 敬业签 ...
基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
跨系统角色转移服务器未响应,王者荣耀：跨系统角色转移真的来了，附详细操作内容注意事项...
原标题:王者荣耀:跨系统角色转移真的来了,附详细操作内容注意事项 Hi,这里是小聆心为大家带来今天的分享. 相信不少读者在玩王者荣耀时为换手机系统更换时,数据不共通而头疼不已吧,今小聆心就为大家带来了 ...
Text组件新增内容通过tag_config设置前景色、背景色
Text组件新增内容时,可以通过tag_config给特定的字符串设定前景色.背景色等属性. self.text1.tag_config('red',foreground = 'red',backgr ...
php渔夫,渔夫有爱——5.2钓鱼新增内容附日常稀有鱼经验
本文来源于NGACN,作者 :subaru39 渔夫有爱--5.2钓鱼新增内容(附日常稀有鱼经验) [没心思看全篇的童鞋请直接拉到底端看总结] 昨天5.2更新但是没空上,今天上线在半山种完地以后忽然发 ...
8.0魔兽服务器维护时间,魔兽世界8.0什么时候上线 wow8.0开放时间及新增内容一览...
魔兽世界8.0什么时候上线?wow8.0新增了哪些?下面小编带来wow8.0开放时间及新增内容一览,希望对大家有所帮助. wow8.0开放时间及新增内容一览: 8.0的剧情是玩家合力击退了燃烧军团,并 ...

CSS3 详细新增内容

CSS3

css3新增选择器

1.属性选择器

2.结构伪类选择器

3.伪元素选择器

2D转换

1.2D移动

2.2D旋转

3.2D缩放

动画制作

2. 调用动画

3.动画属性

3D转换

透视 perspective

1.3D移动 translate3d

2.3D旋转 rotate3D

3.3D呈现 transform-style

4.案例制作

CSS3 详细新增内容相关推荐

最新文章

热门文章