CSS如何实现动画?

html-css012

CSS如何实现动画?,第1张

创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。

1、html标签部分,因为要做hover效果,div所以要做成嵌套

2、利用伪类创建六边形,这里只取了每个伪类的top边框,是为了后面用clip做动画效果

3、添加hover边框闭合动画,这里要注意的是伪类的hover效果格式.item-boder1:hover:after,hover要写中间

4、看一下效果

你的代码里面只有位置移动的top,left。没有写旋转的代码。

在动画帧时加入rotate(角度)就可以旋转并移动,可以参考下面代码。

相关示例如下:

<style>

.ani{animation:box 1s linear 0s infinitewidth:100pxheight:100pxbackground:greenborder-radius:50%}

@keyframes box{0%   {transform:rotate(0deg)translate(0,0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0)}75%{transform:rotate(270deg)}100% {transform:rotate(360deg)translate(0,0)}}

</style>

<div class="ani"></div>

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。