Top

转载文章 利用旋转正方形与图形的组合实现爱心

实现爱心效果图

源码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>利用旋转正方形与图形的组合实现爱心</title>
 6         <style>
 7              html {
 8                  font-family: "microsoft yahei";
 9              }
10              .heartShaped {
11                  position: absolute;
12                  left: 50%;
13                  top: 50%;
14                  transform: translate(-50%, -50%) rotate(45deg);
15                  width: 140px;
16                  line-height: 140px;
17                  text-align: center;
18                  font-size: 14px;
19                  color: white;
20                  background: rgba(255,20,147,.85);
21              }
22              .heartShaped:before, .heartShaped:after {
23                  content: "";
24                  position: absolute;
25                  left: -70px;
26                  top: 0;
27                  width: 140px;
28                  height: 140px;
29                  background: rgb(255,20,147);
30                  border-radius: 50%;
31                  z-index: -1;
32              }
33              .heartShaped:after {
34                  left: 0px;
35                  top: -70px;
36              }
37         </style>
38     </head>
39     <body>
40         <div class="heartShaped">
41             heartShaped
42         </div>
43     </body>
44 </html>

文章转载 【CSS进阶】伪元素的妙用--单标签之美

posted @ 2016-11-15 22:37  Avenstar  阅读(388)  评论(0)  编辑  收藏  举报