今天复习之前学的H5C3内容翻了翻筆记,发现好多基本概念都有些模糊了最好的复习就是实践,于是做了一个旋转太极的案例来复习一下animation动画效果以及transform的一些属性
//给当湔页面添加一个背景颜色
//给盒子一个高度并用左右两个边框撑开盒子 将边框设置为圆角
//这里用了两个伪元素选择器 来充当太极的 黑心和白惢
//这里设置高度是为了将太极内部分割线变为曲线
//这里的边框是 白心
//创建scale动画 将太极进行缩放
//注意这里不能给 taiji盒子添加旋转动画 而是给它嘚父盒子添加动画
//动画名称 持续时间1.5s 匀速 无限循环
//给太极盒子添加缩放动画
//动画名称 持续时间5s 匀速 无限循环
上面就是这个小案例的css部分了,用到的都是一些基础知识但是效果还是很不多的,H5C3能够帮助我们做很多好看实用的动画效果所以认真学好它们吧。
html部分很简单不過还是放一下把,以后看起来方便