css动画和js动画有什么区别

html-css024

css动画和js动画有什么区别,第1张

js动画可以写自己的逻辑控制速度,大小等,css动画没有复杂的逻辑,https://www.apiref.com/css-zh/properties/animation/index.htm,这里有介绍。

你要先确定你想要的网页的风格和大体的布局。

比如:风格是蓝色调的;布局是两列布局,顶部是banner,左边导航栏,右边是主体内容,下面是footer。

先把大的框架定下来,然后在大的框架里面,再布小的,然后是更小的。

一下子就布好,都考虑到是不现实的。

可以先在纸上画画,先打后小,先粗后细嘛。

动画反复运行时,使用animation-direction属性指定动画是否反向播放。

当动画只运行一次时,指定该属性将不会出现效果。

.close {    cursor: pointer    display: inline-block    width: 100px    height: 100px    border-radius: 50%    background-color: #96CEB4    position: relative  }

  i {    color: #FFEEAD    font-size: 48px    position: absolute    top: 8%    left: 19%  }

  /*定义动画*/

  @-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/

    from { /*动画起始状态*/

      -webkit-transform: rotate(0deg)    }

    to { /*动画结束状态*/

      -webkit-transform: rotate(360deg)    }

  }  @keyframes spin {    from {      transform: rotate(0deg)    }

    to {      transform: rotate(360deg)    }

  }  .close:hover i {    -webkit-animation: spin 1s linear infinite/*鼠标hover时,i图标旋转,infinite表示动画无限循环*/

    animation: spin 1s linear infinite    

  }123456789101112131415161718192021222324252627282930313233343536373839

解析: 

keyframes:定义一个名为spin的关键帧动画。 

from:指定动画的起始状态 

to:指定动画的结束状态。 

linear:动画匀速运动 

infinite:表示动画无限循环

如果想让动画执行2次:

.close:hover i {    -webkit-animation: spin 1s linear 2/*2代表动画执行2次*/

    animation: spin 1s linear 2    

  }1234

如果想让两次动画之间有延迟(比如一次动画结束,停留2秒再次执行动画,并且执行2次):

.close:hover i {    -webkit-animation: spin 1s linear 2s 2 /*2s代表延迟2秒 2代表动画执行2次*/

    animation: spin 1s linear 2s 2    

  }1234

还可以反向旋转(alternate表示偶数次数反向播放动画,如下代码是顺时针旋转一次后,再逆时针旋转一次):

.close:hover i {    -webkit-animation: spin 1s linear 2s 2 alternate /*2s代表延迟2秒 2代表动画执行2次*/

    animation: spin 1s linear 2s 2 alternate    

  }1234