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

标题: 陈玉-20221024-CSS3 [打印本页]

作者: polaris123 时间: 2022-10-24 23:50
标题: 陈玉-20221024-CSS3
一、今日学习内容
1.CSS3新增选择器：伪元素选择器
  概念：利用css创建新标签元素，不需要新增html标签，简化html的结构
  基本语法：
div：：before {content：“ ”；  } ；
div：：after {content：“ ”；  } ；
  注意：1.before和after创建的元素是行内元素；

      2.必须有content属性；

      3.before是在父元素内容的前面创建元素，after是在父元素内容后面创建元素；
2.CSS3过渡
  概念：可在不使用flash或者js的前提下可以实现从一种样式转化为胡另一种样式的效果（IE9以下版本不支持）
  语法：transition：要过渡的属性花费时间运动轨迹何时开始；
3.CSS3的2D转换
  3.1 2D位移
   基本语法：
1.transform：translate（x，y）；对盒子的X轴和Y轴进行位移

2.transform：translateX（n）；对盒子的X轴进行位移；

            3.transform：translateY（n）；对盒子的Y轴进行位移；
  3.2 2D旋转
   基本语法：transform：rotate(度数deg)；
  3.3 2D缩放
   基本语法： transform:scale(x,y);其中x，y代表缩放的倍数
  3.4设置中心点
   基本语法：transform-origin:x,y;
4.CSS动画制作
  4.1动画序列
   1.0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
   2.在 @keyframes  中来规定css的样式，keyframes叫做关键帧
   3.可以用百分比来规定变化发生的时间，或者用关键字from 和 to来规定，等同于0%~100%
   4.动画常用属性值
1.@keyframes  定义动画
      2.animation  所有动画简写属性，不包括animation-play-state属性
      3.animation-name 调用@keyframe定义动画名字
      4.animation-durtion 完成一个周期动画所需时间，默认0
      5.animation-timing-function 规定动画速度曲线
      6.animation-delay  何时开始
      7.animation-interation-count 规定动画循环次数，默认1，无限循环为infinite
      8.animation-direction 规定下一周期是否进行逆向播放，默认为normal，逆向为alternate
      9.animation-play-state 规定动画正在运行或者暂停，默认running ，暂停为paused
      10.animation-fill-mode 规定动画结束时状态，保持结束后状态forwords ，回到起点为backwords
animation-timing-function中step（）属性是指分几步完成
二、今日问题
未遇到问题

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