css代码画爱心(html5爱心代码)
如何用css做一个爱心
心形的话可以通过这样来实现.heart{position:relative;width:100px;height:100px;margin:100px;}.heart:before,.heart:after{position:absolute;content:"";display:block;width:30px;height:50px;border-radius:30px30px00;background:#F00;}.heart:before{-webkit-transform:rotate(-45deg);}.heart:after{right:56px;-webkit-transform:rotate(45deg);}
小白求教:css中如何将圆形渐变成心形？
1、用css画一个圆形
.disc1{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:300px 0px 0px 300px;
? ? border-radius:100%;
? ? float:left;
}
2、由于爱心是由两个圆和一个正方形组成的，所以还需要再来一个圆形
.disc2{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:250px 0px 0px 0px;
? ? border-radius:100%;
? ? float:left;
? ? position: relative;
? ? right: 50px;
}
3、心型下方就需要做一个正方形
.square{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin: 300px 0px 0px 0px;
? ? float: left;
? ? position: relative;
? ? right: 152px;
}
4、做完这些的效果已经基本上出来了，但是还需要调整一下爱心的角度，这时就需要用到css样式中的transform中的rotate属性了。
由于需要把三个div都旋转角度，所以把这三个div放在一个div里面。具体代码如下：
.main{
transform: rotate(45deg);
margin: 300px;
}
全部代码如下
!DOCTYPE html
html
? ? head
? ? ? ? meta charset="utf-8" /
? ? ? ? title/title
style type="text/css"
*{
? ? margin: 0px;
? ? padding: 0px;
}
.main{
? ? transform: rotate(45deg);
? ? margin: 300px;
}
.disc1{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:300px 0px 0px 300px;
? ? border-radius:100%;
? ? float:left;
}
.disc2{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin:250px 0px 0px 0px;
? ? border-radius:100%;
? ? float:left;
? ? position: relative;
? ? right: 50px;
}
.square{
? ? width: 100px;
? ? height: 100px;
? ? border:1px solid red;
? ? background-color: red;
? ? margin: 300px 0px 0px 0px;
? ? float: left;
? ? position: relative;
? ? right: 152px;
}
/style
? ? /head
? ? body
? ? ? ? div class="main"
? ? ? ? ? ? div class="disc1"/div
? ? ? ? ? ? div class="disc2"/div
? ? ? ? ? ? div class="square"/div
? ? ? ? /div
? ? /body
/html
css画心，
纯画的，颜色可调整代码：fill: #ff4400;
svg version="1.1" id="图形" xmlns="" xmlns:xlink="" x="0px" y="0px" width="58" height="58" viewBox="0 0 58 58" enable-background="new 0 0 58.636 58.678" xml:space="preserve" data-tags="pic" style="margin-left:2px;fill: #ff4400;margin-top:2px;"path id="J_icon_svg" d="M510.0032-140.96c-5.1456 0-9.9584 1.1264-14.1824 3.3792-61.8752 30.7456-174.0544 114.6624-274.304 226.3808-52.608 58.5728-94.4128 116.5056-124.2624 172.16-34.8928 65.024-52.5568 125.5168-52.5568 179.9424 0 112.1024 52.2496 176.7168 96.128 211.2512 48.7168 38.3488 115.3792 61.2352 178.304 61.2352 39.04 0 79.4624-11.9808 120.0896-35.6608 29.7984-17.3824 54.1184-37.8112 70.784-53.5808 16.6144 15.7696 40.9856 36.1984 70.7584 53.5808 40.6528 23.68 81.0496 35.6608 120.1408 35.6608 62.8992 0 129.5616-22.8864 178.2528-61.2352 43.904-34.5344 96.2048-99.1488 96.2048-211.2512 0-54.4256-17.6896-114.9184-52.608-179.9424-29.8496-55.6544-71.6544-113.5616-124.2624-172.16-100.1984-111.6928-212.3776-195.6608-274.1504-226.432C519.8336-139.8592 515.0208-140.96 510.0032-140.96L510.0032-140.96zM319.1296 650.3616" transform="translate(16, 24) scale(1, -1) scale(0.025,0.025)" style="
"/path/svg