div盒子 css 样式写 旋转太极

原创 1315007322 随笔 日常娱乐 434阅读 2018-01-19 14:04:22 举报

本文章来自前端初学者的 个人经验(不喜勿喷,不足的地方欢迎指导!)

首先,用div 写盒子大致的布局可以分为上下两个 盒子(一黑一白)做出两个半圆对起来,然后 再用两个盒子作为里边的弧度。
html 代码

首先 写出上面的盒子将它 下一半 超出隐藏,再用浮动属性让浮起来。接着下面的盒子上一半就在浮起来的盒子下面了。
这样 外面的黑白两块写好,下面因为 里面还要有一个超出的弧度,这就可以用定位补充的两个盒子 插入进去。里面的
小圆也是如此 居中就行! 最后来写 给整体 所有的div来个border-radius:50%; 就全部变成 圆形。可是这时候会发现
我们的上半圆它形状不对!
html 代码

因为上面的盒子高度只有整体的一半,所以变形,这时候就需要单独把它的左下角,右下角的弧度去了,只改变上面的弧度即可。
html 代码

有兴趣的 大家也可加个 transition 属性让它动起来,是不是很炫酷呢。
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复