(作者:杨先金;撰写时间:2019年1月31日)

1,学习了圆角效果,我们不妨用它来制作一个红心,但要搭配起旋转才能真正的实现,下面我们来看看它的html部分以及css样式部分;
用旋转和圆角效果来制作红心
用旋转和圆角效果来制作红心
我将一个红心分成两瓣——hart1和hart2,将它们用一个绿色的圆包裹起来,红色跟绿色搭配起来比较和谐,并且给它们设置50个像素的上边的圆角效果,如下图所示;
用旋转和圆角效果来制作红心
2,接下来让它们以相反的方向旋转同样的角度;
用旋转和圆角效果来制作红心
用旋转和圆角效果来制作红心
3,然后我们将会看到我们想要的红心并没有出现,因为我们还需要给它稍微挪动一下位置;
用旋转和圆角效果来制作红心
像这样,给hart2设置相对定位,让它向左移动15个像素,与hart1部分重合,最终得到一个我们想要的红心。
用旋转和圆角效果来制作红心
此次分享到此结束,下回小编继续与大家分享更多更有趣好玩的代码。

相关文章:

  • 2021-08-01
  • 2022-12-23
  • 2022-12-23
  • 2021-11-19
  • 2021-09-21
  • 2021-05-25
  • 2022-12-23
  • 2021-11-23
猜你喜欢
  • 2021-08-27
  • 2022-02-18
  • 2022-01-20
相关资源
相似解决方案