使用CSS3制作网页动态效果入门

旧城等待， 2021-12-14 14:45 693阅读 0赞

用css3做网页动态效果，主要涉及3个属性：  
1、transition 使元素的某些属性从一个状态到另一个状态时产生平滑的过渡  
2、animation 使元素产生动画效果  
3、transform 使元素产生旋转、缩放、偏移等变换

## CSS3 transition 属性 ##

transition属性可以为元素设置渡效果，过渡效果可以应用到支持伪类的标签，如hover、focus等等，通常设置在用户将鼠标指针浮动到元素上时发生（hover），transition属性要绑定在将要发生过渡效果的元素上。  
如：设置一个div的宽度是100px,鼠标浮动到该div上的时候，宽度是300px,那么可以在div的样式中，设置transition属性，规定鼠标悬停在div上等待0.1庙后，div的width属性应用过渡效果，过渡的过程经历1秒，匀速过渡。  
语法：transition: property duration timing-function delay;  
transition是一个简写属性，这是合并写法，顺序为 属性 持续时间 过渡类型 延迟时间

div{
        width: 100px;
        height: 100px;
        background: red;
        transition: width 1s linear	0.1s;    
      }
      div:hover{
        width: 300px;
      }

transition包含的四个过渡属性：

###### 1、transition-property 用于设置应用过渡效果的 CSS 属性的名称 ######

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>没有属性会获得过渡效果。</td> 
  </tr> 
  <tr> 
   <td>all</td> 
   <td>所有属性都将获得过渡效果。</td> 
  </tr> 
  <tr> 
   <td>property</td> 
   <td>定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。</td> 
  </tr> 
 </tbody> 
</table>

###### 2、transition-duration \* 设置过渡效果持续的时间 ######

单位可以是s(秒)或ms（毫秒），不设置或设置为0将不产生过渡效果

###### 3、transition-timing-function 规定过渡效果的速度曲线，如匀速、加速等等 ######

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>linear</td> 
   <td>线性过度</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>由慢到快</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>由慢到快</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>由快到慢</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>ease-in-out由慢到快在到慢。</td> 
  </tr> 
  <tr> 
   <td>cubic-bezier(n,n,n,n)</td> 
   <td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td> 
  </tr> 
 </tbody> 
</table>

###### 4、transition-delay 定义过渡效果等待多久开始。 ######

单位可以是s(秒)或ms（毫秒），不设置则默认为0

## transform属性 ##

transform属性能够使元素产生旋转、缩放、偏移等变化，是元素的一种状态，它本身不会产生动态的效果，但是与transition属性结合，为变化前后的状态设置过渡，就可以产生动态效果了。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、偏移或倾斜，学习transform属性的难点在于对几何知识的理解，特别是3D转换,这里就简单的入个门吧。  
PS:transform变换的参照点默认为中心点，可以通过transform-origin(a,b)改变参照点的位置,a,b的值可以是百分比，px，em等，或者left center right top bottom center

语法是：transform: transform-functions; transform属性的值是转换方式。  
transform转换方式有两个大类，2D转换和3D转换，大部分2D属性值后面加上“3D”就是同类型的3D转换。  
CSS3 3D 转换webkit支持的最好，整体来说pc上支持的不是很理想，主要应用在移动端。  
PS:transform属性的原理涉及到线性代数、矩阵、计算机图形学等数学领域的知识，我本人不是很理解，这里先抄录整理一下别人的知识点。  
一、CSS3 2D 转换

1.  偏移 translate(x,y)　　相对于原位置产生偏移　　是translateX(x) translateY(y)的简写
2.  旋转 rotate(angle)　2D旋转，旋转的中心是元素的中心点，参数angle是旋转的角度，单位deg,　　默认顺时针旋转，负值表示逆时针旋转
3.  缩放 scale(a,b)　　尺寸缩放　　值2 表示缩放2倍　　scaleX() scaleY()
4.  翻转 skew( 角度,角度)　　翻转，x方向，y方向　　值30deg　　表示30度　　skewX() skewY()
5.  matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

二、 CSS3 3D 转换

1.  偏移 translate3d(x,y,z)　　相对于原位置产生3D偏移　　是translateX(x) ，translateY(y) ，translateZ(z)的简写
2.  3D旋转　rotate3d(number,number,number,angle)
3.  3D缩放 scale3d(x,y,z)　　3D缩放　　scaleX(x) scaleY(y) scaleZ(z)
4.  matrix3d 定义 3D 转换，使用 16 个值的 4x4 矩阵。

## animation属性 ##

通过css3可以创建动画，目前市面上流行的大部分浏览器都支持css3动画（ie10开始支持css3动画），按照时间顺序在一块画布上播放不同的画面，就会形成动画，某一个时间节点播放什么画面，就是关键帧，连续的关键帧就形成了一个动画，这跟电影胶片类似，胶片制作好了，我们可以选择在某个电影厅放映这部片子、放映多久、是否循环、如果循环的话循环之前停顿多久等等。  
css3中定义animation动画，首先要定义关键帧（@keyframes）来创建动画，这里需要给动画取个名字，用百分比代表动画的进度，在不同百分比的时间节点上定义css样式。

@keyframes arrowing {
      0%{color: red;}      /* 0%可以用from代替 */
      100%{color: blue;}   /* 100%可以用to代替 */
    }

就这样一个叫arrowing 的简单动画制作好了，第二步给动画绑定元素，反过来可以理解成给动画的播放器设置属性，animation是下面这些属性的简写形式

animation:
    [animation-name]    // 动画的名称
    [animation-duration] //持续时间
    [animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
    [animation-iteration-count] [animation-direction] // 播放次数、播放顺序
    [animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

.arrow{
      animation: arrowing 5s linear 0.5s infinite;        //动画名称arrowing ，持续时间5s,匀速变化，延迟0.5s,无限次循环播放 
    }