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