主页 / 建站知识 /

使用CSS画爱心的过程详解

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

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

第一步

先画一个正方形。如图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <div class="heart-body">
        <div class="heart-shape"></div>
    </div>
</body>
</html>

第二步

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

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            : -45px;
        }

利用border-radius: 50%; 属性

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /兼容苹果；谷歌，等一些浏览器认/
            -moz-border-radius: 50%;
            /兼容火狐浏览器/
            -o-border-radius: 50%;
            /兼容opera浏览器/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

第三步

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

.heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
            -webkit-transform: rotate(45deg);
            / Safari 和 Chrome /
            -moz-transform: rotate(45deg);
            / Firefox /
            -ms-transform: rotate(45deg);
            / IE 9 /
            -o-transform: rotate(45deg);
            / Opera /
            transform: rotate(45deg);
        }

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

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /兼容苹果；谷歌，等一些浏览器认/
            -moz-border-radius: 50%;
            /兼容火狐浏览器/
            -o-border-radius: 50%;
            /兼容opera浏览器/
            border-radius: 50%;
            background-color: #f70e0e;
        }

以上所述是长沙网络推广给大家介绍的使用CSS画爱心的过程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：详解CSS3中nth-child与nth-of-type的区别 下一篇：CSS3打造百度贴吧的3D翻牌效果示例

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by