首页 > 代码库 > css 画 爱心
css 画 爱心
用css画爱心，虽然这样的方法会写很多的css代码，但是做成功之后，会有一种很满足的成就感。
爱心，可以有3个常规的几何图形形成，一个正方形加两个相同半径的圆或半圆。一个等腰三角形加两个圆，两个房型叠加，都行。
我的实现方法是选择最简单的一个正方形加两个相同半径的圆。首先创建一个类名为heart的div，然后为其固定宽度，高度，和背景颜色。接着通过伪类选择器：before和：after添加content：‘‘; 规定其宽度和高度都为之前的div的高度，背景颜色与之前的div相同，通过一个大于高度和宽度等同的那个值的一半的border-radius使之成为圆形。然后把两个圆的position值定为absolute，div的值定为relative；通过绝对定为的方法，把：before和：after其中一个top：一半的高宽等同值的负数，left：0；另一个的top：0，left：一半的高宽等同值。这样一个倒着的心形就画好了。最后只要我们通过旋转div就可以获得一个心形。div高宽等同的时候，旋转的角度为-45度。通过transform：rotate（-45deg）即可，但这个transform需要用到其他的前缀，可用prefixer插件，或css3 please中查找到相应前缀。下面是完整的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Heart</title> 6 <style> 7 div.heart{ 8 margin:100px; 9 width:40px;10 height:40px;11 background:#E74C3C;12 -webkit-transform:rotate(-45deg); 13 -moz-transform:rotate(-45deg); 14 -ms-transform:rotate(-45deg); 15 -o-transform:rotate(-45deg); 16 transform:rotate(-45deg);17 position:relative;18 }19 div.heart:before,div.heart:after{20 position:absolute;21 content:‘‘;22 width:40px; 23 height:40px; 24 background:#E74C3C; 25 -moz-border-radius:20px; 26 border-radius:20px; 27 }28 div.heart:before{29 top:-20px;30 left:0;31 }32 div.heart:after{33 top:0;34 left:20px;35 }36 </style>37 </head>38 <body>39 <div class="heart"></div>40 </body>41 </html>
css 画 爱心
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。