菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 薛伯一 CSS302 [打印本页]

作者: Paracelsus 时间: 2022-10-25 00:41
标题: 薛伯一 CSS302
一：伪元素：
   定义：伪元素选择器可以利用css创建新标签元素，而不需要新增html标签，从而简化html结构
   注意：
      1.before和after创建的元素是行内元素
      2.创建的元素我们在html的结构中里面找不到，所以叫做伪元素
      3.before和after必须有content属性
      4.before是在父元素内容的前面创建元素，after在父元素的内容后面插入元素
      5.伪元素选择器和元素选择器的权重一样，都是1
二、CSS3过渡
   概念：
      过渡可以在不使用flash或者js的前提下可以实现从种样式转化为另一种样式效果（IE9一下版本不支持）
   语法：
      transition：要过渡的属性花费的时间运动曲线何时开始；
      1.要过渡的属性
            想要变化的css属性，可以是宽度、高度、背景颜色、内外边距等等，如果想要变化所有的属性，那么直接写all就可以了
      2.过渡时间
            单位是秒，必须写单位：例如0.5s
      3.运动曲线
            默认是case(可以省略)
三、CSS的2D转换
   属性：transform（2D的位移）
      对盒子的x轴和y轴进行位移
            transform：translate（x,y）;
      对盒子的x轴和x轴进行位移
            transform：translateX（n）;
      对盒子的x轴和y轴进行位移
            transform：translateY（n）;
      特点：
            1.translate不会影响其他元素的位置（和相对定位类似）
            2.translate的值如果是百分比，就代表移动盒子本身宽高的50% translate（50%，50%）；
            3.translate对行内元素没有效果
            4.translate设置盒子的水平垂直居中
      position：absoluate top:50%;left:50%; transform:translate(50%,50%);


         scale（2D缩放）
      语法：transform：scale（x,y）    transform：scale（1，1）；里面的倍数代表x轴y轴缩放的倍数
      scale缩放和width/height设置盒子rotate2D旋转)
      使用该属性值可以对元素进行旋转设置，transform：rotate（度数）
      正值代表顺时针旋转，负值逆时针旋转
         transform-origin设置中心点
      语法：
            transform-origin：x,y;
            1.使用方位名词设置中心点
            2.利用像素值设置元素的中心点
         注意：
               当单位为具体像素值时，距离的起始点是元素的左上角
四、CSS3动画制作
   动画序列
      1.0%是动画的开始，100%是动画的结束
      2.在@kevframes 中来规定css的样式，kevfremas叫做关键帧
      3.可以用百分比来规定变化发生的时间，或者用关键字from和to来规定，等同于0%~100%
   动画的使用步骤：
      1.定义动画
      2.调用动画

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)