当前位置：Gxlcms > css > CSS如何实现画爱心的示例代码分享

CSS如何实现画爱心的示例代码分享

时间：2021-07-01 10:21:17 帮助过：71人阅读

今天小颖给大家分享一个用CSS画的爱心，底下有代码和制作过程，希望对大家有所帮助。

第一步：


先画一个正方形。如图：



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>css画桃心</title>
  6.     <style media="screen">
  7.         .heart-body {
  8.             width: 500px;
  9.             margin: 100px auto;
  10.             position: relative;
  11.         }
  12.         .heart-shape {
  13.             position: relative;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-color: #f70e0e;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <p class="heart-body">
  22.         <p class="heart-shape"></p>
  23.     </p>
  24. </body>
  25. </html>

第二步：

将利用伪元素before和 :after，在正方形的左边和上边各画一个正方形，然后再利用border-radius: 50%;属性，修饰下这两个正方形，然后就得到了两个圆,如图所示：




  1. .heart-shape:before,
  2.         .heart-shape:after {
  3.             position: absolute;
  4.             content: '';
  5.             width: 100px;
  6.             height: 100px;
  7.             background-color: #ffc0cb;
  8.         }
  9.         .heart-shape:before {
  10.             left: -45px;
  11.         }
  12.         .heart-shape:after {
  13.             top: -45px;
  14.         }


利用border-radius: 50%; 属性：

  1. .heart-shape:before,
  2.         .heart-shape:after {
  3.             position: absolute;
  4.             content: '';
  5.             width: 100px;
  6.             height: 100px;
  7.             -webkit-border-radius: 50%;
  8.             /**兼容苹果；谷歌，等一些浏览器认*/
  9.             -moz-border-radius: 50%;
  10.             /**兼容火狐浏览器*/
  11.             -o-border-radius: 50%;
  12.             /**兼容opera浏览器*/
  13.             border-radius: 50%;
  14.             background-color: #ffc0cb;
  15.         }

第三步：

类名为：heart-shape的p 利用transform: rotate(45deg); 属性将他们旋转45度，如图所示：



  1. .heart-shape {
  2.             position: relative;
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: #f70e0e;
  6.             -webkit-transform: rotate(45deg);
  7.             /* Safari 和 Chrome */
  8.             -moz-transform: rotate(45deg);
  9.             /* Firefox */
  10.             -ms-transform: rotate(45deg);
  11.             /* IE 9 */
  12.             -o-transform: rotate(45deg);
  13.             /* Opera */
  14.             transform: rotate(45deg);
  15.         }

小颖把圆的背景色和正方形的背景色没给统一的颜色，是为了大家更好的看到明显的效果图，接下来小颖将其背景色设置成统一的，最终的爱心就出来了，如图所示：



  1. .heart-shape:before,
  2.         .heart-shape:after {
  3.             position: absolute;
  4.             content: '';
  5.             width: 100px;
  6.             height: 100px;
  7.             -webkit-border-radius: 50%;
  8.             /**兼容苹果；谷歌，等一些浏览器认*/
  9.             -moz-border-radius: 50%;
  10.             /**兼容火狐浏览器*/
  11.             -o-border-radius: 50%;
  12.             /**兼容opera浏览器*/
  13.             border-radius: 50%;
  14.             background-color: #f70e0e;
  15.         }

以上就是CSS如何实现画爱心的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！