如何利用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如何添加图片的提示信息
  • 热门搜索
    攻略男主手册 大同旅游景点有哪些景点推荐 老掉头发是怎么回事 丹霞山旅游 深圳市旅游景点 搭档英语怎么说 肉粽子怎么包 贷款房子怎么卖 加拿大旅游景点 河南旅游地图