CSS作图(二),纯CSS代码画出精致逼真的图像,学起来啊

#yin-yang{width:96px;height:48px;background:#eee;border-color:red;border

CSS的强大和精妙,只有在认真研读其代码之后才会深刻明白。

今日继续用纯CSS画图,并给大家整理了本文中所有代码,需要的小伙伴可以私信我哦。

一、阴阳

首先,用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;
}

当然,颜色什么的,可以随便改啦~

二、鸡蛋

再画一个可爱的鸡蛋~~~像这样:

CSS作图(二),纯CSS代码画出精致逼真的图像,学起来啊

代码仅仅几句话:

#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%;
}

三、最后画一个弯弯的月亮~

长这样:

CSS作图(二),纯CSS代码画出精致逼真的图像,学起来啊

代码非常非常少:

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

CSS作图(二),纯CSS代码画出精致逼真的图像,学起来啊

是不是很神奇?不敢相信这几句代码居然有这样的功力?

那就打开电脑,按照我之前讲的方法创建一个html试试吧~

不知道怎么创建的小伙伴看这里>>css3制作图形大全:简单几句代码画出漂亮的图形,一起来看看吧~

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10197.html

(0)
上一篇 2023年 4月 22日 下午11:57
下一篇 2023年 4月 22日 下午11:57

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信