热门关键字:
jquery > jquery教程 > css3 > CSS基础 - CSS3

CSS基础 - CSS3

243
作者:管理员
发布时间:2020/5/20 10:33:43
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1685

整理了工作中用过的CSS3属性。

选择器

  • value1~value2
p~ul 选择p元素里面的ul
  • [attribute^=value]
a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素
  • [attribute$=value]
a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
  • [attribute*=value]
a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
  • :first-of-type
p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素
  • :last-of-type
p:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素
  • :only-of-type
p:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
  • :only-child
p:only-child选择属于其父元素的唯一子元素的每个 <p> 元素
  • :nth-child(n)
p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素
  • :nth-last-child(n)
p:nth-last-child(2)同上,从最后一个子元素开始计数
  • :nth-of-type(n)
p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素
  • :nth-last-of-type(n)
p:nth-last-of-type(2)	同上,但是从最后一个子元素开始计数
  • :last-child
p:last-child选择属于其父元素最后一个子元素每个 <p> 元素
  • :root
:root	选择文档的根元素
  • :empty
p:empty	选择没有子元素的每个 <p> 元素(包括文本节点)
  • :target
#news:target选择当前活动的 #news 元素
  • :enabled
input:enabled	选择每个启用的 <input> 元素
  • :disabled
input:disabled选择每个禁用的 <input> 元素
  • :checked
input:checked选择每个被选中的 <input> 元素
  • :not(selector)
:not(p)选择非 <p> 元素的每个元素
  • ::selection
::selection选择被用户选取的元素部分

动画 animation

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式,来控制CSS动画的中间环节

animation: name duration timing-function delay iteration-count direction;
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
  • @keyframes animation-name {keyframes-selector {css-styles;}}
animationname 定义动画的名称
keyframes-selector 动画时长的百分比。合法的值:0-100%from(与 0% 相同)to(与 100% 相同) 
css-styles 必需。一个或多个合法的 CSS 样式属性
  • animation-fill-mode
- none 默认值,回到初始状态
- forwards 当动画完成后,保持最后一个属性值
- both 根据animation-direction轮流应用forwards和backwards规则
- backwards 在 animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
  • animation-play-state
- running 播放
- paused 暂停

2D/3D 转换属性

  • 2D变形(translate)
  • translate 第一个参数指定X轴的位移,第二个参数指定Y轴的位移
translateX 指定X轴的位移
translateY 指定Y轴的位移
translateZ 指定Z轴的位移
translate3D 第一个参数指定X轴的位移, 第二个参数指定Y轴的位移, 第三个参数指定Z轴的位移
  • 3D变形(transform)
  • translate 位移
  • rotate 旋转
rotate3D(): 3D旋转,必须指定四个参数,前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度;
rotateX(): 指定X轴的旋转角度;
rotateY(): 指定Y轴的旋转角度;
rotateZ(): 指定Z轴的旋转角度;
  • scale 缩放
scale(x,y) 定义 2D 缩放转换。 
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX 通过设置 X 轴的值来定义缩放转换。 
scaleY 通过设置 Y 轴的值来定义缩放转换。 
scaleZ 通过设置 Z 轴的值来定义 3D 缩放转换
  • skew 斜切
- skew 第一个参数对应X轴[必须], 第二个参数对应Y轴[当不设置时, 默认为0];;
- skewX 指定X轴的斜切;
- skewY 指定Y轴的斜切;





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:CSS3
友荐云推荐