搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

CSS3新增属性

web前端自学平台 2017-10-31

一、CSS3新增选择器

1、nth-chlid(n)用法

  selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签

2、nth-last-chlid(n)用法

  selector:nth-last-chlid(n)指找到倒数第n个子元素并且该元素为selector标签

3、selector:enabled可用的表单控件

4、selector:disabled不可用的表单控件

5、E>F  E元素下的第一层子集

6、E~F E元素后面的兄弟元素

7、E+F 紧挨着的兄弟元素

8、属性选择器 E[data-attr]含有data-attr属性的元素

  1. E[data-attr='ok'] 含有data-attr属性的元素且它的值为"ok";

  2. E[data-attr^='ok']含有data-attr属性的元素且它的值开头含有"ok";

  3. E[data-attr$='ok']含有data-attr属性的元素且它的值结尾含有"ok";

  4. E[data-attr*='ok']含有data-attr属性的元素且它的值中含有"ok";

    div[data-attr = "ok"]{

      color:red;

    }

二、CSS3圆角

1、设置某一个角的圆角:border-radius:左上角 右上角 右下角 左下角;

  比如设置左上角的圆角:border-top-left-radius:30px 60px;

2、同时设置四个角:border-radius:30px 20px 10px 50px;

3、设置四个角相同(常用):border-radius:20%;border-radius:50%;(是正圆)

三、CSS3阴影

1、box-shadow:水平偏移  垂直偏移  羽化大小  扩展大小  颜色  是否内阴影

注:正值向右偏移,向下偏移,默认为外阴影

box-shadow:10px 5px 20px 2px pink;

如果做内阴影的话,可以把偏移量设为0
box-shadow:0 0 20px 2px red inset;

 CSS3新增属性

四、CSS3 透明度rgba(新的颜色值表示法)

  1. 盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE)

  2. rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS3新增属性CSS3新增属性CSS3新增属性

五、transition过渡动画 (需要触发)

transition:过渡属性  时间  运动方式  动画延迟

1、transition-property  设置过渡的属性,比如:width  height  background-color(是在宽度上做动画还是在高度上亦或是背景上)

2、transition-duration  设置过渡的时间,比如:1s  500ms

3、transition-time-function  设置过渡的运动方式

  1. linear  匀速

  2. ease  开始和结束慢速

  3. ease-in  开始时慢速

  4. ease-out  结束时慢速

  5. ease-in-out 开始和结束时慢速

  4、 transition-delay  设置动画的延迟

CSS3新增属性

制作图片文字遮罩

CSS3新增属性

六、transform变换(一般配合transition使用,有个过渡效果不至于太突兀)

  1. translate(x,y) 设置盒子位移    如:transform:translate(200px,300px);

  2. scale(x,y) 设置盒子缩放          如:transform:scale(1.2,1);

  3. rotate(deg) 设置盒子旋转        如:transform:rotate(360deg);

  4. skew(x-angle,y-angle) 设置盒子倾斜     如:transform:skew(20deg,30deg);

  5. perspective 设置透视距离(近大远小) 如:transform:perspective(800px) rotateX(30deg);

  6. transform-style flat| preserve-3d 设置盒子是否按3d空间显示  如:transform-style:preserve-3d;

  7. translateX、translateY、rotateZ 设置三维移动

  8. rotateX、rotateY、rotateZ 设置三维旋转

  9. scaleX、scaleY、scaleZ 设置三维缩放

  10. transform-origin 设置变形的中心点  如:transform-origin:left top;transform-origin:20px 50px;

  11. backface-visibility 设置盒子背面是否可见  如:backface-visibility:hidden;

CSS3新增属性

七、CSS3 animation动画(直接进行动画,不需要触发)

animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性

如:animation:moving 1s ease 1s 6 alternate forwards; 

1、@keyframes 定义关键帧动画  

如:@keyframes  动画名{

    from{属性:属性值}

    to{属性:属性值}

}

2、animation-name  动画名称

3、animation-duration  动画时间

4、animation-timing-function 动画曲线

  1. linear  匀速

  2. ease  开始和结束慢速

  3. ease-in  开始时慢速

  4. ease-out  结束时慢速

  5. ease-in-out 开始和结束时慢速

  6. steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction:normal 默认动画结束不返回/alternate 动画结束后返回

8、animation-play-state 动画状态

  a、paused 停止

  b、running 运动

9、animation-fill-mode  动画前后的状态

  a、none 不改变默认行为

  b、forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

  c、 backwards 在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

CSS3新增属性

 例:loding动画,代码如下:

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《CSS3新增属性》的版权归原作者「web前端自学平台」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端自学平台微信公众号

web前端自学平台微信公众号:gh_d79ea4fb97f3

web前端自学平台

手机扫描上方二维码即可关注web前端自学平台微信公众号

web前端自学平台最新文章

精品公众号随机推荐