Html5_animation动画

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>@keyframes rotate {from {/* 动画刚开始，角度 */
                transform: rotate(0deg);}to {/* 动画结束时，角度 */
                transform: rotate(360deg);}}@keyframes change {0% {/* 动画刚开始，div的宽高 */
                width: 200px;height: 200px;}50% {/* 动画执行一半时，div的宽高 */
                width: 100px;height: 400px;}100% {/* 动画执行完毕时，div的宽高 */
                width: 200px;height: 200px;}}</style></head>
<body><!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: rotate 5s linear infinite; width: 200px;height:200px; margin: 50px 50px 50px 50px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div><!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: change 5s linear infinite; width: 500px;height: 500px; margin: 100px 100px 100px 100px; background-color: red"></div></body>
</html>

Html5_animation动画相关推荐

Android Animation (安卓动画）概念简介
Android Animation Android 四种动画分别为逐帧动画和补间动画.属性动画.过渡动画: Frame Animation (逐帧动画) 实现方式:xml 和 Java代码图片跳转的 ...
Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
Android 动画 ViewPropertyAnimator 的使用
ViewPropertyAnimator 说明: ViewPropertyAnimator 可为View对象上的选择属性启用自动和优化的动画, ViewPropertyAnimator 不是由调用方构 ...
Android ViewAnimationUtils (动画) 的使用
先看下ViewAnimationUtils 实现的几个常见的效果图如下: ViewAnimationUtils 的作用: 设置剪切圆动画的动画制作器一般的使用如下: Animator revea ...
Android AnimationUtils (动画)的使用
AnimationUtils 其实就是补间动画(Tween Animation) 在xml 中的写了动画java 中调用这边打算就写一个demo 简答的记录下它的使用详细的请看点击查看,这篇博客 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 属性动画(Property Animation) ValueAnimator 的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...

Html5_animation动画

Html5_animation动画相关推荐

最新文章

热门文章