[关闭]
@wangyupu 2020-05-21T06:11:56.000000Z 字数 4979 阅读 33

HTML5+CSS第九章主讲网页动画

HTML5+CSS

本章目标

  1. 会使用transform 2D变形设置网页元素样式
  2. 会使用transition制作过渡动画
  3. 会使用animation制作网页动画
  4. #CSS3属性制作动画
  5. 如何在网页中实现动画效果？
  6. 动态图片
  7. Flash
  8. JavaScript
  9. CSS3变形
  10. CSS3过渡
  11. CSS3动画

CSS3变形2-1

  1. CSS3变形是一些效果的集合
  2. 如平移、旋转、缩放、倾斜效果
  3. 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
  4. transform:[transform-function]*;---`设置变形函数，可以是一个，也可以是多个，中间以空格分开`

CSS3变形2-2

  1. 变形函数
  2. translate()：平移函数，基于X、Y坐标重新定位元素的位置
  3. scale()：缩放函数，可以使任意元素对象尺寸发生变化
  4. rotate()：旋转函数，取值是一个度数值
  5. skew()：倾斜函数，取值是一个度数值
  6. 示例：
  7. <style>
  8.         div{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: red;
  13.             /*倾斜  单位deg*/
  14.             /*transform: skew(10deg,10deg)*/
  16.             /*旋转   单位deg*/
  17.             /*transform: rotate(100deg);*/
  18.             /*缩放*/
  19.             /*transform: scale(1.2);*/
  20.             /*平移*/
  21.             /*transform: translate(100px,100px);*/
  22.         }
  23.         div:hover{
  25.         }
  26.     </style>
  27.     <body>
  28.         <div></div>
  29. </body>

translate(tx,ty);

  1. tx---X轴（横坐标）移动的向量长度
  2. ty---Y轴（横坐标）移动的向量长度
  3. 一个方向上的偏移
  4. translateX（tx）
  5. 表示只设置X轴的位移
  6. transform:translateX(100px)
  7. translateY（ty）
  8. 表示只设置Y轴的位移
  9. transform:translateY(100px)

2D缩放

  1. scale(sx,sy);
  2. sx---横向坐标（宽度）方向的缩放量
  3. sy---纵轴坐标（高度）方向的缩放量
  4. scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
  5. scaleX(sx)：表示只设置X轴的缩放
  6. 示例：
  7. transform:scaleX(2)
  8. scaleY(sy)：表示只设置Y轴的缩放
  9. 示例：
  10. transform:scaleY(2)

2D倾斜

  1. skew(ax, ay);
  2. ax---水平方向（X轴）的倾斜角度
  3. ay---垂直方向（Y轴）的倾斜角度
  4. 可以仅设置沿着X轴或Y轴方向倾斜
  5. skewX（ax）：表示只设置X轴的倾斜
  6. skewY（ay）：表示只设置Y轴的倾斜

2D旋转

  1. rotate(a);
  2. 参数a单位使用deg表示
  3. 参数a取正值时元素相对原来中心顺时针旋转
  4. #小结
  5. rotate( )函数只是旋转，而不会改变元素的形状
  6. skew( )函数是倾斜，元素不会旋转，会改变元素的形状

css过渡

  1. transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
  2. CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
  3. transition:[transition-property transition-duration  transition-timing-function  transition-delay ] 
  4. transition-property---过渡或动态模拟的CSS属性
  5. transition-duration---完成过渡所需要的时间
  6. transition-timing-function--- 指定过渡函数
  7. transition-delay---过渡开始出现的延迟时间
  8. 示例:
  9. <style type="text/css">
  10.         img{
  11.             width: 100px;
  12.             height: 100px;
  13.             margin:100px 100px;
  14.             /*过渡*/
  15.             transition:  transform 2s;
  16.         }
  17.         img:hover{
  18.             /*旋转360*/
  19.             transform: rotate(360deg) scale(1.5);
  20.         }
  23.         div{
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: red;
  27.             /*过渡  all所有属性*/
  28.             transition: all 1s linear 2s;
  30.         }
  31.         div:hover{
  32.             width: 1000px;
  33.             height: 200px;
  34.         }
  36.     </style>
  37.     <body>
  38.         <div></div>
  39.         <div></div>
  41.         <img src="img/1.jpg" />
  42.     </body>

过渡属性的使用4-1

  1. 过渡属性（ transition-property ）
  2. 定义转换动画的CSS属性名称
  3. `IDENT`：指定的CSS属性（width、height、background-color属性等）
  4. `all`：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡属性的使用4-2

  1. 过渡所需的时间（ transition-duration ）
  2. 定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡属性的使用4-3

  1. 过渡动画函数（ transition-timing-function ）
  2. 指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
  3. ease：速度由快到慢（默认值）
  4. linear：速度恒速（匀速运动）
  5. ease-in：速度越来越快（渐显效果）
  6. ease-out：速度越来越慢（渐隐效果）
  7. ease-in-out：速度先加速再减速（渐显渐隐效果）

过渡属性的使用4-4

  1. 过渡延迟时间（ transition-delay ）
  2. 指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
  3. 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
  4. 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
  5. 0：默认值，元素过渡效果立即执行

过渡的触发机制

  1. 伪类触发
  2. ：hover
  3. ：active
  4. ：focus
  5. ：checked
  7. 媒体查询：通过@media属性判断设备的尺寸，方向等
  8. JavaScript触发：用JavaScript脚本触发
  9. <style type="text/css">
  10.         div{
  11.             width:1000px;
  12.             height: 600px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             position: relative;
  16.         }
  17.         div img{
  18.             width: 200px;
  19.             height: 150px;
  20.             position: absolute;
  21.         }
  22.         img:nth-child(1){
  23.             left: 100px;
  24.             top: 20px;
  25.             transform: rotate(10deg);;
  26.         }
  27.         img:nth-child(2){
  28.             left:150px;
  29.             top: 60px;
  30.             transform: rotate(60deg);;
  31.         }
  32.         img:nth-child(3){
  33.             left: 300px;
  34.             top: 20px;
  35.             transform: rotate(10deg);;
  36.         }
  37.         img:nth-child(4){
  38.             left: 600px;
  39.             top: 100px;
  40.             transform: rotate(60deg);;
  41.         }
  42.         img:nth-child(5){
  43.             left: 500px;
  44.             top: 20px;
  45.             transform: rotate(100deg);;
  46.         }
  47.         img:nth-child(6){
  48.             left: 400px;
  49.             top: 150px;
  50.             transform: rotate(150deg);;
  51.         }
  54.         img:hover{
  55.             transform:rotate(0deg) scale(1.2);
  56.             z-index: 2;
  57.         }
  59.     </style>
  60.     <body>
  61.         <div>
  62.             <img  src="img/1.jpg"/>
  63.             <img  src="img/2.jpg"/>
  64.             <img  src="img/3.jpg"/>
  65.             <img  src="img/4.jpg"/>
  66.             <img  src="img/5.jpg"/>
  67.             <img  src="img/6.jpg"/>
  68.         </div>
  69.     </body>

使用transition实现过渡动画的使用步骤

  1. 在默认样式中声明元素的初始状态样式
  2. 声明过渡元素最终状态样式，如悬浮状态
  3. 在默认样式中通过添加过渡函数，添加一些不同的样式

CSS3动画

  1. animation动画简介
  2. animation实现动画主要由两个部分组成
  3. 通过类似Flash动画的关键帧来声明一个动画
  4. 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

CSS3动画的使用过程5-1

  1. 设置关键帧
  2. @keyframes  IDENT  {
  3.    from {/*CSS样式写在这里*/}
  4.    percentage {/*CSS样式写在这里*/}
  5.    to {/*CSS样式写在这里*/}
  6. }
  7. @keyframes spread {
  8.    0% {width:0;}
  9.    33% {width:23px;}
  10.    66% {width:46px;}
  11.    100% {width:69px;}
  12.  }
  13.  ```
  14. #CSS3动画的使用过程5-2
  15. ```html5
  16. @keyframes的浏览器兼容性
  17. 写兼容的时候浏览器前缀是放在@keyframes中间
  18. 例如：@-webkit-keyframes、@-moz- keyframes
  19. CSS3动画的使用过程5-3
  20. animation:animation-name  animation–duration  animation-timing-function
  21.    animation-delay  animation-iteration-count  animation-direction  
  22. animation-play-state  animation-fill-mode;
  23. animation:animation-name---由@keyframes
  24. 创建的动画名称
  25.  animation–duration---动画时间
  26. animation-timing-function--- 动画方式
  27.  animation-delay---延迟时间
  28. animation-iteration-count---动画的播放次数
  29. animation-direction---动画的播放方向
  30. animation-play-state---动画的播放状态
  31. animation-fill-mode---动画开始之前和结束之后发生的操作
  34. <div class="md-section-divider"></div>

CSS3动画的使用过程5-4

  1. 动画的播放次数（animation-iteration-count）
  2. 值通常为整数，默认值为1
  3. 特殊值infinite，表示动画无限次播放
  4. 动画的播放方向（animation-direction）
  5. normal，动画每次都是循环向前播放
  6. alternate，动画播放为偶数次则向前播放
  7. 动画的播放状态（animation-play-state）
  8. running将暂停的动画重新播放
  9. paused将正在播放的元素动画停下来
  12. <div class="md-section-divider"></div>

CSS3动画的使用过程5-5

  1. 动画发生的操作（animation-fill-mode）
  2. forwards表示动画在结束后继续应用最后关键帧的位置
  3. backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
  4. both表示元素动画同时具有forwards和backwards的效果
  5. 示例：
  6. <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .div1{
  12.             width: 500px;
  13.             height: 100px;
  14.             background-color: yellow;
  15.             position: absolute;
  16.             right: 0;
  17.         }
  18.         .div2{
  19.             width: 500px;
  20.             height: 100px;
  21.             background-color: red;
  22.             position: absolute;
  23.             transition: all 2s;
  24.             right: 0;
  25.             top: 0;
  26.         }
  27.         .div2:hover{
  28.             width:0px;
  29.         }
  30.     </style>
  31.     <body>
  32.         <div class="div1">张三你好哈哈哈哈XXXXXYYYYY</div>
  33.         <div class="div2"></div>
  34.     </body>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注