html+css制作心形

学习过html和css之后我们可以尝试做一些小效果，比如说制作心形图案。
效果大概就像是这样

整体形状我们可以理解为一个正方形，在它的上边和右边分别创建一个圆形，最后再将整体旋转就可以做成一个爱心的效果了

原理大概就是如此，只需要我们将最后的颜色全部调成一个颜色，再整体旋转45度就可以了。

下面我们附上具体代码，我提供了两种方式，第一种是使用伪类元素来做，第二种是在一个div里面设置两个span标签。
方法一：

<div class="one"></div>

.one{position:relative;width:100px;height:100px;background:pink;margin-left:100px;margin-top:100px;transform:rotate(-45deg);}
.one:before{content:"";position:absolute;width:100px;height:100px;background-color:pink;border-radius:50%;top:-50px;left:0;
}
.one:after{content:"";position:absolute;background-color:pink;border-radius:50%;height:100px;width:100px;left:50px;top:0;
}

通过使用伪类元素：after和：before，通过定位将他们的位置放在正确的位置上，最后再加一个旋转就可以制作一个爱心。当然在爱心中间我们也可以添加一些文字，通过在div中写一个span标签，并对span元素进行操作，就可以将文字元素添加在想要添加的位置上

<div class="one"><span id="content">I love you</span>
</div>

#content{position:absolute;top:20px;left:25px;z-index:2;font-size:15px;transform:rotate(45deg);
}

方法二：在div中设置两个span
与第一个方法大同小异，
在这里就不过多解释，直接附上代码：

<div class="two"><span id="first"></span><span id="second"></span>
</div>

.two{position:relative;width:50px;height:50px;background:#7FFFD4;left:400px;top:-40px;transform:rotate(-45deg);
}
#first{position:absolute;width:50px;height:50px;border-radius:50%;background:#7FFFD4;left:0px;top:-25px
}
#second{position:absolute;width:50px;height:50px;border-radius:50%;background:#7FFFD4;left:25px;top:0px
}

同样也可以达到我们想要的效果，我们还可以通过js去绑定一些事件来制作一些与众不同的效果。

html+css制作心形相关推荐

html怎么做一个心形边框,使用CSS获取心形边框？
我有这样的代码,用于创建一个彩色心脏(其中有一个蓝色的背景),并使用CSS消色心脏(白色与蓝色边框有色):使用CSS获取心形边框? #favourite_user { position: relati ...
心跳（纯代码制作心形，animation动画）
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body><div></div> </b ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
HTML+CSS实现心形效果
html+css实现心形一.正方形+圆形二.矩形一.正方形+圆形效果: 代码: 解析: 设置一个正方向和两个圆形,圆形直径与正方形宽度相等(使用:before/:after) 将两个圆形分别向 ...
QML粒子系统制作心形效果
说明: 虽然 5 月 20 号过了,还是来画下心.这里我使用 QML 的粒子系统来制作心形效果. 粒子模拟的核心是 ParticleSystem 控制共享时间线的.一个场景可以有多个粒子系统,每个粒子 ...
html怎么做3d心形背景,如何用PS制作心形背景图?
PS怎么制造有层次感心型布景图?近期许多的运用ps的小伙伴想要制造一个美丽的布景图不知道怎么操作,小编今天就给大家带来一个颇具美感的心型布景图的制造办法.进入下载Adobe PhotoShop CS4 ...
ps基础学习：用路径工具制作心形效果
路径工具的描边,可以制作各种效果,包括如下的心形效果. 1.画布的线性渐变效果制作选择渐变工具,渐变模式选择线性渐变,渐变颜色设置由蓝色到浅蓝色,透明度由不透明到透明.设置完成后,按住鼠标左键自上而 ...
python制作心形照片墙_这个七夕节，用Python为女友绘制一张爱心照片墙吧！
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
css盒心形的代码过程,如何使用CSS和D3实现用文字组成的心形动画效果（附代码）...
本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://gith ...

html+css制作心形

html+css制作心形相关推荐

最新文章

热门文章