CSS @keyframes动画旋转+ js 点击事件

    ## 标题  CSS @keyframes动画旋转+ js 点击事件

开发工具与关键技术：DW CSS+JS
作者：杨镇虹
撰写时间：2019.01.18
一、 html布局
下面首先给它设置布局给它一个div 然后给它一个类class（box1类名）再去CSS给它设置样式

图1
二、 CSS样式
给这个类(box1)设置样式,给这个盒子设置大小（高度、宽度）定位(position) 相对定位(relative) 相对定位以自身为中心 圆角效果(border-radius) 盒子阴影（box-shadow）实现代码：图2

图2
盒子实现效果：图3

图3
三、 给每一个盒子设置布局、样式
Html布局 实现代码：图4

图4
CSS样式 实现代码：图5

图5
四、js点击事件
Js点击 显示 隐藏事件 实现代码：图6

图6
五、 html实现效果
点击图7 显示@keyframes动画旋转效果图8

图7

图8