CSS基础 – CSS3

2023-01-12 0 704

CSS基础 – CSS3

重新整理了组织工作时用过的CSS3特性。

优先示例

value1~value2p~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-typep:first-of-type 优先选择归属于其子原素的第一个 <p> 原素的每一 <p> 原素 :last-of-typep:last-of-type优先选择归属于其子原素的最终 <p> 原素的每一 <p> 原素 :only-of-typep:only-of-type优先选择归属于其子原素惟一的 <p> 原素的每一 <p> 原素 :only-childp: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-childp:last-child优先选择归属于其子原素最终两个子原素每一 <p> 原素 :root:root 优先选择文件格式的根原素 :emptyp:empty 优先选择没子原素的每一 <p> 元素(主要包括文档结点) :target#news:target优先选择现阶段公益活动的 #news 原素 :enabledinput:enabled 优先选择每一投入使用的 <input> 原素 :disabledinput:disabled优先选择每一停止使用的 <input> 原素 :checkedinput: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轴的斜切;

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务