How to use CSS to implement sample code sharing for drawing hearts-CSS Tutorial-php.cn

How to use CSS to implement sample code sharing for drawing hearts

黄舟

Release： 2017-06-01 10:43:48

Original

3871 people have browsed it

Today Xiaoying will share with you a heart drawn with CSS. There is the code and production process at the bottom. I hope it will be helpful to everyone.

Step one:

First draw a square. As shown in the picture:

How to use CSS to implement sample code sharing for drawing hearts

<!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>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

Copy after login

The second step:

will use the pseudo elements before and: after, Draw a square on the left and top of the square, and then use the border-radius: 50%; attribute to modify the two squares, and then you will get two circles, as shown in the picture:

How to use CSS to implement sample code sharing for drawing hearts

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

Copy after login

Use border-radius: 50%; Attribute:

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

Copy after login

Step 3 ：

The p of the class name: heart-shape uses the transform: rotate(45deg); attribute to rotate them 45 degrees, as shown in the figure:

How to use CSS to implement sample code sharing for drawing hearts

.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);
        }

Copy after login

Xiaoying did not give the background color of the circle and the background color of the square a unified color so that everyone can see the obvious effect better. Next, Xiaoying changed the background color Set it to unified, and the final love will come out, as shown in the picture:

How to use CSS to implement sample code sharing for drawing hearts

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

Copy after login

The above is the detailed content of How to use CSS to implement sample code sharing for drawing hearts. For more information, please follow other related articles on the PHP Chinese website!