如何利用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如何添加图片的提示信息
  • 热门搜索
    泊美的护肤品怎么样 腰围怎么换算 厦门地图旅游地图 玫莉蔻怎么样 白鹿镇旅游攻略 就业推荐表怎么写 海南旅游路线 湖北有哪些旅游景点 广州市旅游商务职业学校 可以组什么词