Home > Article > Web Front-end > CSS draws a red heart
CSS draws a red heart
- php中世界最好的语言Original
- 2018-03-22 11:14:092419browse
This time I will bring you CSS to draw a red heart. What are the precautions for drawing a red heart with CSS? The following is a practical case, let’s take a look.
Step one:
First draw a square. As shown in the picture:
<!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>
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:
.heart-shape:before,
.heart-shape:after {
position: absolute;
content: '';
width: 100px;
height: 100px;
background-color: #ffc0cb;
}
.heart-shape:before {
left: -45px;
}
.heart-shape:after {
top: -45px;
}Use border-radius: 50%; Attribute:
.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;
}
Step 3:
The class name is: heart-shape p. Use the transform: rotate(45deg); attribute to rotate them 45 degrees, as shown in the figure:
.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);
}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 set the background color to a unified color, and the final love is It came out, as shown in the picture:
.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;
} I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Detailed explanation of the use of css3 multi-class selector
Detailed explanation of the use of CSS background-attachment
Bootstrap implementation price list
The above is the detailed content of CSS draws a red heart. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 to achieve animated bicycle effectNext article：css3 to achieve animated bicycle effect