通过C3实现基础动画效果

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画的定义和调用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 300px;background-color: pink;/* 调用动画  animation:动画名 动画执行时间*/animation: move 5s;}/* 定义动画 */@keyframes move {/* 开始状态 */form {transform: translate(0, 0);}/* 结束状态 */to {transform: translate(800px, 0);}}</style>
</head><body><div class="box"></div>
</body></html>

或者是

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 300px;background-image: linear-gradient(pink,blue);border-radius: 50%;/* 调用动画  animation:动画名 动画执行时间 动画速度(linear匀速) 动画循环次数infinite(无限循环) 动画方向alternate forwards(停留在最后一帧)*/animation: move 30s linear alternate infinite ;}/* 定义动画 */@keyframes move {0%{transform: translate(0, 0);}20%{transform: translate(800px, 0) rotateZ(1turn);}40%{transform: translate(800px, 400px) rotateZ(1.1turn);}60%{transform: translate(0, 400px) rotateZ(1.5turn);}100%{transform: translate(0, 0) rotateZ(2turn);}}/* 注意点:动画可以写多个状态 多个状态通过百分比描述 状态相同只会执行一次 */</style>
</head>
<body><div class="box"></div>
</body>
</html>

动画的属性:

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

通过C3实现基础动画效果相关推荐

P75-前端基础动画效果-过渡效果
P75-前端基础动画效果-过渡效果 1.概述这篇文章介绍动画效果其中的一个类型过渡效果. 2.过渡效果 2.1.过渡效果基础内容 <!DOCTYPE html> <html> ...
P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习 1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习. 知识点: 元素设置透明效果设置3d变形效果设置动画旋转 2. 3D复 ...
P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
UE4 Sequence添加基础动画效果（03-主序列的使用）
在上一篇的基础上添加一些摄像头的跟拍效果效果: 步骤: 1.鼠标右键新建 Animation->关卡序列命名为主序列 2.双击打开主序列 3.点击窗口->内容浏览器->内容浏览 ...
计算机动画设置进入,计算机文化基础动画效果设置.ppt
计算机文化基础动画效果设置为了达到预期的效果,演示文稿创建的后期,静态效果上,应根据文稿的内容对演示文稿应用的设计模板.整体演示顺序作全局性考虑,对个别幻灯片的文字格式.背景.配色方案和版式布局作局 ...
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表 1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表. 2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转.在这个案例中我们通过拆分 ...
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
iOS动画效果、绘制图形
文章转载自:http://www.cnblogs.com/kenshincui/p/3972100.html 概览在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥 ...
keyshot渲染图文教程_keyshot基础图文教程，手把手教你用keyshot制作动画效果
keyshot基础图文教程,手把手教你用keyshot制作动画效果你知道么?keyshot除了用来渲染产品,其实还可以制作动画效果的,它里面内置了好几种运动方式,利用keyshot的旋转,平移,缩小 ...

通过C3实现基础动画效果

通过C3实现基础动画效果相关推荐

最新文章

热门文章