web前端入门到实战:纯CSS画动态彩虹

html-css014

web前端入门到实战:纯CSS画动态彩虹,第1张

效果图如下

用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式。

1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览

2、彩虹样式,彩虹有一个左右摇摆的动画效果

3、投影样式,别忘了是同样有动画的哟

搞定,很简单有没有,跟着实现一遍,你也可以画出美丽的彩虹咯~

1、打开htm1软件,打开工作区空间,选择需要进行操作的文件夹,点击上方的新建文件选项。

2、在弹出的文本框中给html文件命名,文件后缀名要以html结尾,文件命名为round,html,建议使用功能性的文件命名方式。

3、在新建的html文件中输入设置圆角矩形按钮彩虹条CSS代码。

4、在代码的空白区域右击在弹出的选项卡中选择Open,In,Default,Browser选项。

5、点击运行之后,在浏览器网页中显示出制作的圆角矩形彩虹条的效果。