宽高变化动画代码，旋转动画代码（HTML5）

这个图片是动态的，可以把代码复制下来看效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>动画</title>
<style type="text/css">
/* 上面的旋转动画代码 */
/* 定义动画，动画名：animat_rotate，可以取任意名字 */
/* 使用方式：animation: run 6s linear; */
@keyframes animat_rotate {
from {
/* 动画刚开始，角度 */
transform: rotate(0deg);
}
to {
/* 动画结束时，角度 */
transform: rotate(360deg);
}
}

/* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */

/* 下面的宽高变化动画代码 */

/* 定义动画，动画名：animat_changeWH，可以取任意名字 */
/* 使用方式：animation: animat_changeWH 6s linear; */
@keyframes animat_changeWH {
0% {
/* 动画刚开始，div的宽高 */
width: 200px;
height: 200px;
}
50% {
/* 动画执行一半时，div的宽高 */
width: 100px;
height: 400px;
}
100% {
/* 动画执行完毕时，div的宽高 */
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>

<div style="animation: animat_rotate 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>

<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>

宽高变化动画代码，旋转动画代码（HTML5）相关推荐

监听元素宽高变化resize
首先我们先了解js中resize功能只支持window对象正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的. 1.重构resize() 在已经引入jquery的情况下 js文件 ...
c#动画（两点动画，旋转动画，变色动画）及案例
C#动画: 两点动画,旋转动画,变色动画 1.边框 border:可以容纳一个其他元素 BorderThickness:边框厚度 BorderBrush:边框颜色 CornerRadius:设置边框圆 ...
Threejs开发之移动动画、旋转动画、缩放动画和路径动画
以下代码示例了threejs的移动动画.旋转动画.缩放动画和路径动画注意:引入three.js三维引擎的路径需要根据自己的情况修改相应的路径,本示例采用引用外部模块的方式. 以下为完整代码: & ...
谷歌气球 simplekml 《八》地图动画之旋转动画的制作-全网唯一
谷歌气球 simplekml 入门<一> 谷歌气球 simplekml 入门<二> 谷歌气球 simplekml 入门<三> 谷歌气球 simplekml 入门&l ...
android 左移动画_android旋转动画和平移动画详解，补充说一下如果制作gif动画放到csdn博客上...
先上效果图: 制作过程是先起一个模拟器,然后把GifCam的框拖到模拟器上面,点击Rec的new先,然后点击Rec,然后就save到本地成gif文件这里做一个左右旋转,上下旋转,和左右移动的动画,先 ...
android 无限旋转动画,Android 属性动画之无限循环缩放动画，旋转动画
缩放动画 AnimatorSet animatorSetsuofang = new AnimatorSet();//组合动画 ObjectAnimator scaleX = ObjectAnimato ...
Android MP3音频播放器仿唱片机播放动画，仿网易云播放动画，旋转动画，MediaPlayer AudioManager
废话不多说上代码 private AudioManager audioManager;private SimpleDateFormat format;private SeekBar seekBar;p ...
Silverlight Blend动画设计系列二：旋转动画（RotateTransform）
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform) Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑 ...
android 动画x轴旋转,写给小白——Android旋转动画（3个方向的旋转）
接上一篇,继续讲动画.今天给大家讲讲怎么实现最简单的旋转动画. 旋转动画,其实,也很简单,关键就几个要素.旋转的原点,旋转的角度,旋转的方向(当然还有旋转速度,不过,速度,是所有动画的东西,所以,我不 ...
安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...

宽高变化动画代码，旋转动画代码（HTML5）

宽高变化动画代码，旋转动画代码（HTML5）相关推荐

最新文章

热门文章