web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变

1、HTML源代码完整代码：

复制代码代码如下:

图片圆形布局 在线演示 DIVCSS5。

2、对应CSS代码：

复制代码代码如下:

#divcss5{ margin:10px auto}。

#divcss5 img{ border-radius:50%}。

命名盒子“id=divcss5”盒子居中，同时上下外间距为10px，然后设置对象盒子里img图片圆角50%。

1、在ps中打开需要裁剪成圆形的正方形图片。

2、在左侧工具栏中选择“椭圆选框工具”。

3、按住shift键的同时拖动鼠标左键形成一个圆形选区。

4、按快捷键Ctrl+J键复制出圆形选区。

5、关闭背景图层以后，就可以看到圆形图片了。

这是最原始的图片。

第一步：插入图形

在选项卡中选择命令插入——形状——同心圆。

第二步：绘制图形

将同心圆在指定的位置绘制适合大小的同心圆。（此 *** 作中如果需要绘制正圆需按住cshift键，绘制椭圆按住ctrl键）

第三步：设置图形格式

由于图形（同心圆）默认的是黑色线条和浅蓝色底纹，所以需要选中图形（同心圆），右键——设置对象格式——选中颜色线条选项卡。调整填充颜色（底纹）为白色，调整线条颜色为无线条颜色，点击确定即可。

END