css3基础

jswusn.com CSS 2019-06-11 18:03:00 730次浏览

css3基础


属性选择器

  ○ E[attr=value] 选中E元素中属性有attr的且属性值为value的元素

  ○ E[attr^=value] 选中E元素中属性有attr的且属性值以value开头的元素

  ○ E[attr$=value] 选中E元素中属性有attr的且属性值以value结尾的元素

  ○ E[attr*=value] 选中E元素中属性有attr的且属性值包含value的元素


伪类选择器

  ○ E:first-child 选中E元素的父元素下所有的子元素的第一个元素,如果类型为E选中否则无效

  ○ E:last-child 选中E元素的父元素下所有的子元素的最后一个元素,如果类型为E选中否则无效

  ○ E:nth-child(n) 选中E元素的父元素下所有的子元素的第n个元素,如果类型为E选中否则无效

  ○ E:nth-last-child(n) 选中E元素的父元素下所有的子元素的倒数第n个元素,如果类型为E选中否则无效


伪元素选择器

  ○ E::before 选中E元素的内容前伪元素

  ○ E::after 选中E元素的内容前伪元素


过渡

  ○ transition 需要过渡的属性过渡时间过渡的动画速度函数过渡的延时时间

  ○ transition-property 需要过渡的属性

  ○ transition-duration 过渡时间单位秒

  ○ transition-timing-function 过渡的动画速度函数如:ease linear

  ○ transition-delay 过渡的延时时间单位秒


2d转换

  ○ transform 转换属性属性值为不同的转换形式

  ○ scale 缩放

  ○ translate 位移

  ○ rotate 旋转

  ○ skew 倾斜

  ○ transform-origin 转换中心


动画

  ○ animation 动画属性

  ○ animation-name 动画序列名称

  ○ animation-duration 动画时长

  ○ animation-timing-function 动画速度函数

  ○ animation-delay 动画延时

  ○ animation-iteration-count 动画执行次数无数次infinite

  ○ animation-direction 动画播放方向默认normal逆播放alternate

  ○ animation-play-state 动画的播放状态默认running暂停paused

  ○ animation-fill-mode 动画结束状态默认backwards保持forwards

@keyframes animationName 
{  
    form{      
        width:100px;  
    }  
    to{      
        width:200px  
    }
}
/* animationName 动画序列名称 */


总结

  css3知识非常繁杂属性较多,无需刻意去记忆,一定要多使用。


技术分享

苏南名片

  • 电话:180-0154-0762
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2020 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号