整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
两天，我们分别实现了六边形和正方形的效果；今天，我们就来实现一下心形效果，心动的感觉哦！
用到的知识点：
接下来，我们就来实现心形的效果：
着手一个div，宽高分别设置100px；，因为之后的伪类元素可能会用到定位，所以，给div加一个相对定位：position：relative；加个背景色background-color: red；利用transform：rotate（45deg），让div旋转45°；最后用margin：auto；使div水平居中。
div代码效果图
之后，我们就用：：after和：：before来实现两个圆：
伪类元素属性设置：
content：“”；
position：absolute；
top： 0px;
left： 0px;
background-color：red；
width: 100%;
height: 100%;
border-radius: 50%;
注意：伪类元素必写属性，content：“”；
接下来，就用transform：translate（），来平移：：after和：：before；
div::after{
transform: translateX(-50%);
}
div::before {
transform: translateY(-50%);
}
写到这里，我们就大功告成了；
最终效果
这就是我们的心形效果图，希望对大家有所帮助。
在进行前端开发时，图标库的使用是一项必须掌握的技巧，目前流行的图标库有fontawesome，iconfont等，只需要引入到项目中，然后使用对应的class，就会得到对应的图标。
但是你们有没有想过，如果是自己的话该怎么去实现这些图标呢？今天我们就来看看一些稍微复杂的图标是如何使用纯CSS3实现吧。
文中的代码已经放到github上了，感兴趣的同学自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我们可以先来看看稍微复杂的图标的样子。
图标库
从图标中可以看出，都是平时很常用的正确，错误，方向键，放大，缩小，开锁，解锁等。
我们从中抽取几个，慢慢分析它们是如何实现的吧。
水杯的图标如下所示。
水杯图标
我们对水杯图标进行拆分，分为杯身和杯柄两个部分。
杯身中的白色长方形就是一个div，设置宽度和高度。
杯身的四周为黑色都是通过border实现，border-bottom比其他三个放向都要大。
杯身的下方是圆角，通过border-radius设置，border-radius的右下和左下方向设置相同的值。
通过上述的分析，我们可以得到杯身部分的CSS代码。
杯身CSS代码
杯柄通过伪元素:before实现。
杯柄设置为绝对定位，修改right值让中间出现一个空白。
调整杯柄位置的宽度，只需要和杯身重叠即可。
杯柄右上角和右下角的border-radius设置为特定的值，展现成圆角的样子。
通过以上的分析，我们可以得到杯柄部分的CSS代码。
杯柄CSS代码
首先我们来看看心形图案的样子。
心形图案
接下来我们同样将整个图案拆分来看，分成左右两个部分，我们将上述图案换成两种不同颜色就一目了然了。
拆分图案
从图案中可以看出，它实际是由两个相同的图行旋转不同的角度构成，相同的元素部分，可以通过设置border-radius值来实现。
我们将左右两个半边的形状分别通过:before和:after来实现，原始的的div形状的CSS属性则很简单，只需要设置相对位置和宽度为0即可。
基本CSS属性
然后看看:before和:after共有的属性，主要是保证为元素部分的定位为绝对定位，然后设置border-radius的值， 保证上半部分是圆角。
共有CSS属性
然后是关键的两半边各自的CSS属性。左侧的图形距左边应该为0，所以left: 0，右侧的图形距右侧为0，所以right: 0。
各有的CSS属性
同时左右两侧图案需要进行旋转，这里我们选择旋转48度，这是为什么呢？
很多人一下子可能会想到旋转45度，我们来看看旋转45度时的样子。
旋转45度
从图形中可以看出，两侧有棱角，整个图案就显得不标准，当旋转超过45度时，棱角的部分就会被里面的图案遮住。
所以这里我们选择旋转48度，达到最终的效果。
最终效果图
今天这篇文章我们使用纯CSS3的属性画出了一个杯子和心形两个稍微复杂点的图案，其实其它图案也是类似的，只要我们能将其拆分，每个部分独立实现，再组合就可以达到图标库的效果了。
大家也可以自己动手实现一下噢~
是我收集整理到的117个Loading特效的第7个。心形特效。
当用户等待页面加载时，一个好看的Loading特效不仅能够增加用户耐心，同时也能够提高用户对网站的印象。今天，我为大家介绍一款纯CSS实现的心形Loading特效。
这个Loading特效是一个由多个心形组成的动画，心形会不断地变换大小，给人一种温馨、浪漫的感觉。这款特效代码简单，可以快速应用到你的网站或者APP中，提升用户体验。
<div class="loading"></div>
<style>
.loading {
position: relative;
width: 100px;
height: 90px;
left: 10px;
top: 10px;
animation: heart infinite 0.85s linear;
}
.loading:before,
.loading:after {
position: absolute;
top: 0;
left: 30px;
width: 30px;
height: 50px;
content: "";
transform: rotate(-45deg);
transform-origin: 0 100%;
border-radius: 30px 30px 0 0;
background: #000;
}
.loading:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heart {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
</style>如果你正在寻找一款美观、实用的Loading特效，那么不妨来试试这个纯CSS实现的心形Loading特效。让它为你的网站增添一份温馨和浪漫吧！
*请认真填写需求信息，我们会在24小时内与您取得联系。
