1.6-HTML5

最新推荐文章于 2024-10-02 17:15:49 发布

晚安不熬夜了

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量97

点赞数

文章标签： html 3d animation css3

本文链接：https://blog.csdn.net/cjjaixuexi/article/details/112282333

版权

1.4-HTML5

音频 – audio
- 属性
  - controls 表示控件 autoplay 音频就绪后马上播放 loop 循环播放音频结束后重新开始播放
视频 – video
- 属性
  - controls 表示控件 autoplay 音频就绪后马上播放 loop 循环播放音频结束后重新开始播放 poster 指的是视频没加载出来先显示此张图片,为了美观不显示一片空白
    muted 指的是静音播放 preload 是否预加载（auto 是；none 否） width heighe

/* 单位是：deg */
			transform: rotate(度数)

- 重点知识点

	- rotate 里面跟度数，单位是 deg

角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点

- 设置元素旋转中心点(transform-origin)

	- transform-origin 基础语法

		- `transform-origin: x y;`

	- 重要知识点

		- 注意后面的参数 x 和 y 用空格隔开

x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词( top 、 bottom 、 left 、 right 、 center )

2D 转换之 scale
- 语法
  - transform: scale(x, y)
- 知识要点
  - 注意，x 与 y 之间使用逗号进行分隔
    transform: scale(1, 1) : 宽高都放大一倍，相当于没有放大
    transform: scale(2, 2) : 宽和高都放大了二倍
    transform: scale(2) : 如果只写了一个参数，第二个参数就和第一个参数一致
    transform:scale(0.5, 0.5) : 缩小
2D 转换综合写法以及顺序问题
- 同时使用多个转换，其格式为 transform: translate() rotate() scale()
  顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  但我们同时有位置或者其他属性的时候，要将位移放到最前面

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

- div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
  动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
  用百分比来规定变化发生的时间，或用 from 和 to ，等同于 0% 和 100%
动画常见属性
动画简写方式
- /* animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态 */
  animation: name duration timing-function delay iteration-count direction fill-mode
- 知识要点
  - 简写属性里面不包含 animation-paly-state
    暂停动画 animation-paly-state: paused ; 经常和鼠标经过等其他配合使用
    要想动画走回来，而不是直接调回来： animation-direction: alternate
    盒子动画结束后，停在结束位置： animation-fill-mode: forwards
速度曲线细节