如何利用CSS3动画效果animation绘制多个圆球

 时间:2024-10-13 12:10:50

1、第一步,打开HBuilder开发工具,新建静态页面animation.html,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球

2、第二步,在<body></body>插入一个div,设置id属性值为circle,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球

3、第三步,编写div的样式,首先设置该div一个半径;圆形背景色为彩色,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球

4、第四步,保存代码预览静态页面,预览页面的效果,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球

5、第五步,再次添加三个圆形,添加这四个圆形的动画效果和透明度,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球

6、第六步,再次预览页面,查看四个圆形运行的效果图,如下图所示:

如何利用CSS3动画效果animation绘制多个圆球
  • SharePoint软件中怎么创建ASP文件
  • VS2013 怎么查看/生成项目Class Diagram类图
  • 专家介绍格林巴利综合症一般有什么症状表现
  • Dreamweaver如何让表格纵向合并
  • Dreamweaver如何添加图片的提示信息
  • 热门搜索
    廖怎么读 可乐鸡翅做法 簋怎么读 苹果怎么设置动态壁纸 星期四英语怎么说 炼乳的做法 白菜豆腐汤的做法 脖子上长了小肉粒怎么回事 浣怎么读 燕窝的做法