程序员浪漫起来就没别人什么事儿了-上篇

一、引言:巧用border-radius来画一个心

CSS是一个很神奇的解释语言,它不但能写出好看的样式、排列好页面的布局,还可以巧用一些声明来进行绘画的功能。再给其添加上动画,就可以变得既生动、又有趣。

谁说程序员很木讷,程序员浪漫起来恐怕就没有其它人什么事了

二、分析过程:

1> Css中有一个声明可以控制边框的圆润程度

注意:

border-radius的值是50%,这个百分比指的是宽度的50%,当然也可以写像素。

上图中,border-radius的值是50px时,与50%效果相同。

声明解释:

Border-radius: 左上角px 右上角px 右下角px 左下角px;

2> 如果想拼出心型,那么需要两个空间进行旋转 然后定位移动到重合

声明解释:

transform:rotate(正数deg); 代表顺时针方向旋转

transform:rotate(负数deg); 代表逆时针方向旋转

3> 将两个空间的左上角、右上角的尖角框变为圆角框

声明解释:

border-radius : N M 0 0 ;

N为左侧方框的宽度一半、M为右侧方框宽度一半

4> 将两个方框加上背景颜色,就会出现一个正心

三、源码

四、扩展

这样,我们一个正心就弄好了。其实很多看起来漂亮的效果,都是由很简单的方法完整的。最有意思的就是研究怎样用所学的知识撸出效果感人的代码。今天,我们画好了一个正心。那么下次分享我会给心加上动画效果,让这颗火热的心动起来。

五、思考作业

请交流怎样用css绘制一些其它形状,喜欢的话也可以留言交流噢!

【本文由“卓象程序员”发布,2019年02月21日】

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190221A09XUM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券