运用css3画个同舟圆示例编码

日期:2021-03-02 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

基础思路

最先你得画3个圆吧,那3个圆如何重合到1块呢?这个就得靠-margin来操纵了。

<div id="tongxin">
    <div id='t1'></div>
    <div id="t2"></div>
    <div id="t3"></div>
</div>

css

        #t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:⑴25px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:⑴00px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

結果


 

编码剖析

如何了解上述编码呢?例如t2中的margin-left:⑴25px。margin-top:25px; 看下面这个图
 

⑴25意味着向左挪动125px,25意味着向下挪动25px。为啥是左挪动125px呢,这个就看你中学数学课学的如何了。两个圆心之间的间距嘛。大圆半径75px,中圆半径 50px。也便是说大圆的和小圆的圆心间距是125px。

竖直方位挪动25px是因为竖直方位的圆心距是25px。

总结

了解margin标值意味着的挪动方位这个事儿就搞定了!

好了,以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。