学习html5的第十天课堂笔记

1.动画
1）animation 动画
A.动画帧
@keyframes 动画名称 {
from {
规则1
}
to {
规则1
}
}
或者
@keyframes 动画名称 {
0% {
规则1
}
…
100% {
规则1
}
}

 B.配置动画
   1）animation-name 动画名称
   2）animation-duration 动画持续时间
   3）animation-delay 延迟时间
   4）animation-fill-mode 填充模式
        forawards：动画结束后元素的状态为动画最后一帧
        backwards：动画开始前也就是动画等待的时候元素的状态为动画的第一帧
        both：以上两者的结合
   5）animation-direction：动画执行的顺序，是从0%->100%还是从100%->0%
        normal
        reverse
        alternate
        alternate-reverse
   6）animation-timing-function
        linear
        ease
        ease-in
        ease-out
        ease-in-out
        steps
   7）animation-iteration
        数字
        infinate

2）transition 过渡
transition: 属性动画持续时间延迟时间曲线;
transition-property
transition-duration
transition-delay
transition-timing-function

可以直接加在元素上，也可以加在:hover上
.product > img {
transition: transform 1s;
}
.product > img:hover {
transform: scale(1.1);
}

3）transform 变形
transform-origin:变形原点
left/right/top/bottom/center

transform:变形函数
  rotate() 单位为度数 deg
     rotateZ()---幸运大转盘
     rotateX()---单杠
     rotateY()---钢管舞

  scale() 参数为一个值，等比例缩放。参数为两个值，第一值表示X轴上的缩放，第二值表示Y轴上的缩放

  skew()
      skewX()
      skewY()

  translate()
      translate(x,y)
      translateX(x)
      translateY(y)

2.媒体查询
响应式布局（newblance、汇智网）

0）屏幕划分标准
手机 width < 768x
pad 768x < width < 1024px;
电脑 width > 1024px;

1）用户终端标准不一
电脑 pad 手机

为这三者各自提供一份网页

提供三套网站（大网站）
提供一套响应式的位置（小网站）

2）媒体查询
.媒体类型
TV 电视
screen 屏幕
…
.媒体属性
1. width/height 视口宽高
2. device-width/device-height 设备宽高
3.orientation
…
.逻辑运算符
and
,
not/only
3）如何应用
1.在导入CSS的时候应用媒体查询表达式

2. 在样式表中应用媒体查询表达式

@media (max-width:768px){
.container{
width:100%;
}
}

3.兼容性问题

4.补充
1)字体图标库
font-awesome
iconfont
2)动画库(使用)
animate.css
keyfranes
3)响应式布局，栅格系统（网格布局）了解
bootstrap
1.全局样式
2.组件
3.js插件

BootCDN

@font-face{}
@media{}

学习html5的第十天课堂笔记

猜你喜欢