CSS的强大和精妙,只有在认真研读其代码之后才会深刻明白。
今日继续用纯CSS画图,并给大家整理了本文中所有代码,需要的小伙伴可以私信我哦。
一、阴阳
首先,用CSS画一个阴阳图,如下:
代码也很简单:
#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; }
当然,颜色什么的,可以随便改啦~
二、鸡蛋
再画一个可爱的鸡蛋~~~像这样:
代码仅仅几句话:
#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
三、最后画一个弯弯的月亮~
长这样:
代码非常非常少:
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
是不是很神奇?不敢相信这几句代码居然有这样的功力?
那就打开电脑,按照我之前讲的方法创建一个html试试吧~
不知道怎么创建的小伙伴看这里>>css3制作图形大全:简单几句代码画出漂亮的图形,一起来看看吧~
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10197.html