## 标题 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