和往常一样，一边喝早茶，一边上网和女粉丝侃大山，在手机和平板电脑上整理修改《hｔｍｌ５》、《javascript》、《css3》、《c语言》、《C++》、《Dos》、《web框架师入门》、《web动作师入门》、《web动画师入门》等多年前写的教程，并研究各种品牌的小程序。
突然女粉丝问：“陈老师，会设计Div旋转动画试验吗？”。
我答：“会的！”。
女粉丝问：“陈老师可以教我吗？”。
我答：“好的~!”,下面我就教大家设计Div旋转动画试验方法。
准备一个Html5标准框架做试验用，如Html5标准框架
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
设计一个chenjie类，控制元素宽、高、背景色、动画时间，如Css代码1。
.chenjie
{
width:128px;
height:128px;
background:#FFB600;
animation:chenjie 6s;
}
设计一个叫chenjie动画，如Css代码2。
@keyframes chenjie
{
from {transform:rotate(0deg);}/*旋转开始角度*/
to {transform:rotate(622deg);}/*旋转结束角度*/
}
设计Div调用chenjie类，如Html代码1
<div class="chenjie">陈老师Div旋转发动画试验</div>
把Css代码1~2和Html代码1移植嵌入到Html5基础框架中，如混合代码小程序1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号:design-Rabbit_Div旋转动画</title>
<style>
.chenjie
{
width:128px;
height:128px;
background:#FFB600;
animation:chenjie 6s;
}
@keyframes chenjie
{
from {transform:rotate(0deg);}/*旋转开始角度*/
to {transform:rotate(622deg);}/*旋转结束角度*/
}
</style>
</head>
<body>
<div class="chenjie">陈老师Div旋转发动画试验</div>
</body>
</html>
运行混合代码小程序1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。
注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。
图1中就是Div旋转动画试验，看到这个动画效果本次试验就成功了。
好！杰哥Html5混合Css3动画师学习笔记分享到这里，要知后事如何请关注、分享、收藏我的作品，如果喜欢请打赏。
