HTML画爱心,c#画爱心

实现效果

需求/功能：

　　如何用CSS HTMl画一段爱情？

分析：

　　爱情可以由一个正方形和两个圆形组合而成。

　　首先画一个正方形的圆，放置如下：

　　再加一个圈。

　　最后，将整个图形顺时针旋转45度。

初步实现：

　　先画一个正方形：

　　body div id= heart /div/body # heart { height:300 px；宽度：300px边框：2px纯黑；}在这个正方形的左边加一个圆。这里，伪类：before用于实现它

　　# heart { height:200 px；宽度：200px边框：2px纯黑；位置：相对；} # heart:before { content: ；宽度：200px高度：200px边框：2px纯黑；边界半径：50%；//将正方形圆化为圆形位置：绝对；左：-100px；//向左移动正方形长度的一半}此时，图形看起来是这样的：

　　添加另一个圆，这里是通过使用after伪类实现的。

　　# heart { height:200 px；宽度：200px边框：2px纯黑；位置：相对；}//这里偷个懒。就写一篇# heart: before，# heart:after { content: ；宽度：200px高度：200px边框：2px纯黑；边界半径：50%；位置：绝对；左：-100px；}//对于第二个圆，只需要向上移动正方形高度的一半# heart:after { left:0；top:-100px；}

　　最后，旋转它，然后添加一种颜色。去掉之前加的边框看清楚。

　　/*旋转心脏并添加颜色*/transform:旋转(45 deg)；背景色：红色；完整代码：

　　样式体，html { display:flex；对齐-项目：居中；justify-content:居中；身高：100vh} #心{高：200px宽度：200px/*边框：2px纯黑；*/位置：相对；变换：旋转(45度)；背景色：红色；} #heart:before，# heart:after { content: ；宽度：200px高度：200px/*边框：2px纯黑；*/边框-半径：50%；位置：绝对；左：-100px；背景色：红色；} #心：后{左：0；top:-100px；}/style/head body div id= heart /div/body

总结：

　　爱情可以由一个正方形和两个圆形组成。这里使用的是前后伪类，然后，两个伪类分别移位。最后，一段爱情可以通过颜色的挤压来实现。

　　以上是用CSS3画一段爱情的详细内容。更多关于用CSS3画爱情的信息，请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。